/* AgentMatrix | 无象矩阵 主题系统
 * taoyao-light: 客户应用浅色主题
 * jiangxuan-dark: Studio/Dev 深色主题
 */

:root {
  /* Radius System */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Transition System */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms var(--ease-out-expo);
  --transition-slow: 400ms var(--ease-out-expo);

  /* Font */
  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  /* Fallback theme colors (taoyao-light defaults) — ensures visibility even if data-theme is missing */
  --color-primary: #f05f75;
  --color-primary-hover: #e84a62;
  --color-primary-active: #d93a52;
  --color-primary-light: #ffe3e7;
  --color-primary-soft: #fff1f3;
  --color-accent: #1ba784;
  --color-accent-light: #ddf7ef;
  --color-highlight: #f8d86a;
  --color-highlight-light: #fff7d6;
  --color-success: #1ba784;
  --color-success-light: #e6f8f2;
  --color-warning: #d99a2b;
  --color-warning-light: #fff4da;
  --color-danger: #d94a4a;
  --color-danger-light: #fdeaea;
  --color-info: #3b82f6;
  --color-info-light: #eaf2ff;
  --color-bg-page: #f3f5f8;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-hover: #f7f8fa;
  --color-bg-active: #fff1f3;
  --color-bg-elevated: #ffffff;
  --color-text-primary: #2b2b2b;
  --color-text-secondary: #6f737a;
  --color-text-muted: #9aa0a8;
  --color-text-disabled: #c4c8cf;
  --color-text-inverse: #ffffff;
  --color-border: #e2e6ec;
  --color-border-light: #eef1f5;
  --color-divider: #edf0f4;
}

:root[data-theme="taoyao-light"] {
  --color-primary: #f05f75;
  --color-primary-hover: #e84a62;
  --color-primary-active: #d93a52;
  --color-primary-light: #ffe3e7;
  --color-primary-soft: #fff1f3;

  --color-accent: #1ba784;
  --color-accent-light: #ddf7ef;
  --color-highlight: #f8d86a;
  --color-highlight-light: #fff7d6;

  --color-success: #1ba784;
  --color-success-light: #e6f8f2;
  --color-warning: #d99a2b;
  --color-warning-light: #fff4da;
  --color-danger: #d94a4a;
  --color-danger-light: #fdeaea;
  --color-info: #3b82f6;
  --color-info-light: #eaf2ff;

  --color-bg-page: #f3f5f8;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-hover: #f7f8fa;
  --color-bg-active: #fff1f3;
  --color-bg-elevated: #ffffff;

  --color-text-primary: #2b2b2b;
  --color-text-secondary: #6f737a;
  --color-text-muted: #9aa0a8;
  --color-text-disabled: #c4c8cf;
  --color-text-inverse: #ffffff;

  --color-border: #e2e6ec;
  --color-border-light: #eef1f5;
  --color-divider: #edf0f4;

  --shadow-sm: 0 2px 8px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 41, 55, 0.10);
  --shadow-lg: 0 16px 48px rgba(31, 41, 55, 0.14);
  --shadow-xl: 0 24px 64px rgba(31, 41, 55, 0.18);
  --shadow-card: 0 10px 28px rgba(31, 41, 55, 0.06);
  --shadow-panel: 0 16px 40px rgba(31, 41, 55, 0.1);
  --shadow-button: 0 8px 18px rgba(240, 95, 117, 0.22);
  --shadow-soft: 0 6px 14px rgba(31, 41, 55, 0.08);
  --shadow-side: 8px 0 24px rgba(31, 41, 55, 0.08);
  --shadow-chat: 0 4px 14px rgba(31, 41, 55, 0.1);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --theme-rgb: 240, 95, 117;
  --highlight-rgb: 248, 216, 106;
  --glass-blur: 20px;

  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);

  --button-secondary-bg: var(--color-bg-surface);
  --button-secondary-border: var(--color-border);
  --button-secondary-text: var(--color-text-primary);

  --card-bg: var(--color-bg-surface);
  --card-soft-bg: var(--color-bg-surface);
  --card-border: var(--color-border-light);
  --card-shadow: var(--shadow-card);

  --sidebar-bg: #ffffff;
  --sidebar-bg-alt: #f7f8fa;
  --sidebar-border: rgba(224, 227, 232, 0.95);
  --sidebar-text: #2c2c2c;
  --sidebar-muted: #8b8b8b;
  --sidebar-active-bg: var(--color-primary-soft);
  --sidebar-active-border: rgba(240, 95, 117, 0.46);
  --sidebar-active-text: var(--color-primary-active);
  --side-note-color: #9a9aa5;

  --topbar-bg: rgba(255, 255, 255, 0.94);
  --topbar-border: var(--color-border);
  --top-meta-bg: var(--color-bg-surface);

  --input-bg: var(--color-bg-surface);
  --input-border: var(--color-border);
  --input-focus-border: var(--color-primary);
  --input-focus-shadow: 0 0 0 3px rgba(240, 95, 117, 0.14);

  --status-disabled-bg: #f1f3f6;
  --error-border: rgba(217, 74, 74, 0.46);
  --error-bg: rgba(217, 74, 74, 0.1);
  --error-text: #a8263b;

  --site-header-bg: linear-gradient(135deg, #f6f8fc 0%, #fff5f6 45%, #fdf8ed 100%);
  --site-header-text: #3a2a2a;
  --site-header-eyebrow: #815762;
  --top-nav-chip-bg: #ffffff;
  --top-nav-chip-border: #e2e6ec;
}

:root[data-theme="xuanmi-light"] {
  --color-primary: #b43c3c;
  --color-primary-hover: #c84d4d;
  --color-primary-active: #963030;
  --color-primary-light: rgba(180, 60, 60, 0.2);
  --color-primary-soft: rgba(180, 60, 60, 0.1);

  --color-accent: #c79b4a;
  --color-accent-hover: #d5ac61;
  --color-accent-soft: rgba(199, 155, 74, 0.16);

  --color-success: #2f8b63;
  --color-success-light: rgba(47, 139, 99, 0.14);
  --color-warning: #bf8e3c;
  --color-warning-light: rgba(191, 142, 60, 0.14);
  --color-danger: #be5252;
  --color-danger-light: rgba(190, 82, 82, 0.14);
  --color-info: #4d7aa4;
  --color-info-light: rgba(77, 122, 164, 0.14);

  --color-bg-page: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #ffffff;
  --color-bg-hover: #f7f7f7;
  --color-bg-active: rgba(180, 60, 60, 0.1);
  --color-bg-elevated: rgba(255, 255, 255, 0.92);

  --color-text-primary: #2e2a24;
  --color-text-secondary: #5a5147;
  --color-text-muted: #7f7368;
  --color-text-disabled: #aea499;
  --color-text-inverse: #ffffff;

  --color-border: rgba(51, 45, 39, 0.28);
  --color-border-light: rgba(51, 45, 39, 0.16);
  --color-divider: rgba(51, 45, 39, 0.12);

  --shadow-sm: 0 2px 8px rgba(73, 57, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(73, 57, 40, 0.10);
  --shadow-lg: 0 16px 48px rgba(73, 57, 40, 0.14);
  --shadow-xl: 0 24px 64px rgba(73, 57, 40, 0.18);
  --shadow-card: 0 10px 28px rgba(73, 57, 40, 0.11);
  --shadow-panel: 0 16px 40px rgba(73, 57, 40, 0.14);
  --shadow-button: 0 10px 20px rgba(180, 60, 60, 0.24);
  --shadow-soft: 0 6px 16px rgba(73, 57, 40, 0.08);
  --shadow-side: 8px 0 24px rgba(10, 20, 35, 0.3);
  --shadow-chat: 0 6px 18px rgba(73, 57, 40, 0.1);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --theme-rgb: 180, 60, 60;
  --highlight-rgb: 199, 155, 74;
  --glass-blur: 10px;

  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);

  --button-secondary-bg: rgba(255, 255, 255, 0.8);
  --button-secondary-border: var(--color-border);
  --button-secondary-text: var(--color-text-primary);

  --card-bg: #ffffff;
  --card-soft-bg: #ffffff;
  --card-border: var(--color-border-light);
  --card-shadow: var(--shadow-card);

  --sidebar-bg: #ffffff;
  --sidebar-bg-alt: #ffffff;
  --sidebar-border: rgba(51, 45, 39, 0.14);
  --sidebar-text: #2d2a25;
  --sidebar-muted: #6a6157;
  --sidebar-active-bg: rgba(180, 60, 60, 0.08);
  --sidebar-active-border: rgba(51, 45, 39, 0.26);
  --sidebar-active-text: #2a2420;
  --side-note-color: rgba(97, 85, 72, 0.76);

  --topbar-bg: #ffffff;
  --topbar-border: var(--color-border);
  --top-meta-bg: var(--color-bg-surface);

  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border: var(--color-border);
  --input-focus-border: var(--color-primary-hover);
  --input-focus-shadow: 0 0 0 3px rgba(180, 60, 60, 0.14);

  --status-disabled-bg: rgba(234, 228, 217, 0.9);
  --error-border: rgba(190, 82, 82, 0.36);
  --error-bg: rgba(190, 82, 82, 0.1);
  --error-text: #7e3434;

  --site-header-bg: radial-gradient(circle at 16% 8%, rgba(199, 155, 74, 0.12), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(180, 60, 60, 0.11), transparent 26%),
    linear-gradient(135deg, #f6f1e8 0%, #f1ebdf 50%, #ece4d6 100%);
  --site-header-text: #2f2a25;
  --site-header-eyebrow: rgba(96, 78, 58, 0.78);
  --top-nav-chip-bg: rgba(255, 255, 255, 0.84);
  --top-nav-chip-border: rgba(51, 45, 39, 0.16);
}

:root[data-theme="jiangxuan-dark"] {
  --color-primary: #2b2f34;
  --color-primary-hover: #1f2328;
  --color-primary-active: #14181d;
  --color-primary-light: rgba(43, 47, 52, 0.22);
  --color-primary-soft: rgba(43, 47, 52, 0.08);

  --color-accent: #3d434a;
  --color-accent-hover: #2f353c;
  --color-accent-soft: rgba(61, 67, 74, 0.12);

  --color-success: #444b52;
  --color-success-light: rgba(68, 75, 82, 0.14);
  --color-warning: #4f555c;
  --color-warning-light: rgba(79, 85, 92, 0.14);
  --color-danger: #5a3f3f;
  --color-danger-light: rgba(90, 63, 63, 0.14);
  --color-info: #495059;
  --color-info-light: rgba(73, 80, 89, 0.14);

  --color-bg-page: #eef0f2;
  --color-bg-surface: rgba(250, 251, 252, 0.7);
  --color-bg-subtle: rgba(241, 244, 246, 0.82);
  --color-bg-hover: rgba(233, 237, 240, 0.92);
  --color-bg-active: rgba(43, 47, 52, 0.1);
  --color-bg-elevated: rgba(255, 255, 255, 0.88);

  --color-text-primary: #1f2328;
  --color-text-secondary: #4a525a;
  --color-text-muted: #6d7781;
  --color-text-disabled: #a1a8b0;
  --color-text-inverse: #ffffff;

  --color-border: rgba(22, 26, 31, 0.32);
  --color-border-light: rgba(22, 26, 31, 0.18);
  --color-divider: rgba(22, 26, 31, 0.14);

  --shadow-sm: 0 2px 8px rgba(22, 26, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 26, 31, 0.10);
  --shadow-lg: 0 16px 48px rgba(22, 26, 31, 0.14);
  --shadow-xl: 0 24px 64px rgba(22, 26, 31, 0.18);
  --shadow-card: 0 10px 30px rgba(22, 26, 31, 0.09);
  --shadow-panel: 0 16px 46px rgba(22, 26, 31, 0.13);
  --shadow-button: 0 10px 20px rgba(22, 26, 31, 0.2);
  --shadow-soft: 0 6px 16px rgba(22, 26, 31, 0.08);
  --shadow-side: 8px 0 26px rgba(22, 26, 31, 0.08);
  --shadow-chat: 0 6px 18px rgba(22, 26, 31, 0.1);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --theme-rgb: 64, 72, 80;
  --highlight-rgb: 121, 129, 138;
  --glass-blur: 16px;

  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);

  --button-secondary-bg: var(--color-bg-surface);
  --button-secondary-border: var(--color-border);
  --button-secondary-text: var(--color-text-primary);

  --card-bg: var(--color-bg-surface);
  --card-soft-bg: rgba(241, 245, 247, 0.8);
  --card-border: var(--color-border-light);
  --card-shadow: var(--shadow-card);

  --sidebar-bg: rgba(241, 244, 247, 0.78);
  --sidebar-bg-alt: rgba(233, 238, 242, 0.8);
  --sidebar-border: rgba(22, 26, 31, 0.16);
  --sidebar-text: #23282e;
  --sidebar-muted: #59636d;
  --sidebar-active-bg: var(--color-primary-soft);
  --sidebar-active-border: rgba(22, 26, 31, 0.36);
  --sidebar-active-text: #14181d;
  --side-note-color: rgba(73, 82, 92, 0.74);

  --topbar-bg: rgba(247, 249, 251, 0.74);
  --topbar-border: var(--color-border);
  --top-meta-bg: var(--color-bg-surface);

  --input-bg: rgba(252, 253, 254, 0.8);
  --input-border: var(--color-border);
  --input-focus-border: var(--color-primary-hover);
  --input-focus-shadow: 0 0 0 3px rgba(43, 47, 52, 0.16);

  --status-disabled-bg: rgba(229, 233, 237, 0.9);
  --error-border: rgba(120, 88, 88, 0.36);
  --error-bg: rgba(120, 88, 88, 0.1);
  --error-text: #5d3f3f;

  --site-header-bg: radial-gradient(circle at 16% 14%, rgba(36, 41, 46, 0.1), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(97, 105, 114, 0.12), transparent 30%),
    linear-gradient(135deg, #f3f5f7 0%, #eaedf0 48%, #e2e6ea 100%);
  --site-header-text: #22282f;
  --site-header-eyebrow: rgba(73, 82, 92, 0.74);
  --top-nav-chip-bg: rgba(251, 252, 253, 0.78);
  --top-nav-chip-border: rgba(22, 26, 31, 0.2);
}