/* Restored vysion visual tokens.
 * The original product uses a warm-white workspace, restrained pale gold and
 * glass-like layers; ChatGPT-inspired information architecture must not replace
 * the established brand palette.
 */
:root {
  color-scheme: light dark;

  --gold: #c9a45c;
  --gold-2: #e1c078;
  --gold-dark: #8f7038;
  --gold-soft: rgba(201, 164, 92, 0.12);
  --gold-border: rgba(201, 164, 92, 0.34);
  --metal-highlight: rgba(255, 236, 180, 0.42);
  --brand-gold-highlight: #f2d99d;
  --brand-gold-core: #c7a15d;
  --brand-gold-shadow: #8b6b35;
  --glass-blur: 10px;

  --danger: #c94f4f;
  --success: #27835b;
  --warning: #9a6d22;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-page-title: 28px;

  --topbar-height: 56px;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 68px;
  --account-menu-width: 288px;
  --account-menu-max-height: 620px;
  --account-menu-padding: 6px;
  --account-menu-item-height: 40px;
  --account-menu-grid-row-gap: 3px;
  --account-menu-item-radius: 8px;
  --account-menu-item-padding-inline: 9px;
  --account-menu-icon-size: 18px;
  --account-menu-chevron-size: 14px;
  --account-menu-item-font-size: 14px;
  --account-menu-group-gap: 6px;
  --account-menu-radius: 12px;
  --button-height: 40px;
  --input-height: 42px;
  --tab-height: 42px;

  --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-brand: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="light"] {
  --app-bg: #f6f3ed;
  --sidebar-bg: rgba(255, 255, 255, 0.68);
  --surface-primary: #ffffff;
  --surface-secondary: #f3efe7;
  --surface-hover: rgba(201, 164, 92, 0.10);
  --surface-selected: rgba(201, 164, 92, 0.15);

  --text-primary: #1c1a16;
  --text-secondary: #4c473d;
  --text-tertiary: #746b5d;

  --border-subtle: rgba(56, 48, 36, 0.12);
  --border-strong: rgba(56, 48, 36, 0.20);

  --bg: var(--app-bg);
  --bg-elevated: #fcfaf6;
  --surface: var(--surface-primary);
  --surface-2: var(--surface-secondary);
  --surface-muted: #eee8dd;
  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(56, 48, 36, 0.105);
  --glass-shadow: 0 18px 42px rgba(45, 38, 26, 0.10);
  --surface-glass: var(--glass-bg);
  --text-main: var(--text-primary);
  --text-subtle: var(--text-secondary);
  --text-muted: var(--text-tertiary);
  --text-hint: #8a8173;
  --brand-letter-v: #8b7654;
  --brand-letter-y: #b78a3e;
  --brand-letter-s: #8f8069;
  --brand-letter-i: #746f68;
  --brand-letter-o: #5b5955;
  --brand-letter-n: #3f4142;
  --brand-letter-highlight: rgba(255, 255, 255, 0.48);
  --brand-ink-outer-top: #a19a90;
  --brand-ink-outer-bottom: #777168;
  --brand-ink-inner-top: #766f66;
  --brand-ink-inner-bottom: #4b4741;
  --text-inverse: #f8f4eb;
  --border: var(--border-subtle);
  --control-bg: rgba(28, 26, 22, 0.035);
  --control-hover: var(--surface-hover);
  --control-border: rgba(56, 48, 36, 0.15);

  --shadow-soft: 0 10px 28px rgba(45, 38, 26, 0.075);
  --shadow-panel: 0 22px 56px rgba(45, 38, 26, 0.13);
  --shadow-composer: 0 10px 28px rgba(45, 38, 26, 0.075);
  --focus-ring: 0 0 0 3px rgba(201, 164, 92, 0.18);

  --button-bg: rgba(255, 255, 255, 0.68);
  --button-border: rgba(56, 48, 36, 0.14);
  --button-text: #3f392f;
  --button-hover-bg: rgba(255, 255, 255, 0.84);
  --button-hover-border: rgba(56, 48, 36, 0.22);
  --button-active-bg: rgba(201, 164, 92, 0.13);
  --button-pressed-bg: rgba(28, 26, 22, 0.08);
  --button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 8px 18px rgba(45, 38, 26, 0.06);
  --button-primary-bg: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(201,164,92,0.14));
  --button-primary-hover: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(201,164,92,0.22));
  --button-primary-border: rgba(201, 164, 92, 0.42);
  --button-primary-text: #72582e;
  --button-secondary-bg: rgba(255, 255, 255, 0.62);
  --button-secondary-border: rgba(56, 48, 36, 0.16);
  --button-secondary-text: #3f392f;
  --button-ghost-bg: rgba(255, 255, 255, 0.42);
  --button-danger-bg: rgba(217, 92, 92, 0.085);
  --button-danger-border: rgba(181, 72, 72, 0.30);
  --button-danger-text: #a04e4a;
  --button-focus-ring: var(--focus-ring);
}

html[data-theme="dark"] {
  --app-bg: #0b0d10;
  --sidebar-bg: rgba(17, 21, 26, 0.86);
  --surface-primary: #151a20;
  --surface-secondary: #1b2129;
  --surface-hover: rgba(255, 255, 255, 0.065);
  --surface-selected: rgba(201, 164, 92, 0.14);

  --text-primary: #f3efe6;
  --text-secondary: #c5bfb2;
  --text-tertiary: #989185;

  --border-subtle: rgba(234, 219, 186, 0.12);
  --border-strong: rgba(234, 219, 186, 0.20);

  --bg: var(--app-bg);
  --bg-elevated: #101419;
  --surface: var(--surface-primary);
  --surface-2: var(--surface-secondary);
  --surface-muted: #11161c;
  --glass-bg: rgba(17, 21, 26, 0.78);
  --glass-border: rgba(234, 219, 186, 0.12);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  --surface-glass: var(--glass-bg);
  --text-main: var(--text-primary);
  --text-subtle: var(--text-secondary);
  --text-muted: var(--text-tertiary);
  --text-hint: #736d63;
  --brand-letter-v: #b8a881;
  --brand-letter-y: #c9a15a;
  --brand-letter-s: #c4baaa;
  --brand-letter-i: #b6afa4;
  --brand-letter-o: #a7a39c;
  --brand-letter-n: #979894;
  --brand-letter-highlight: rgba(255, 255, 255, 0.18);
  --brand-ink-outer-top: #d0c9bd;
  --brand-ink-outer-bottom: #9f988d;
  --brand-ink-inner-top: #f0eadf;
  --brand-ink-inner-bottom: #c9c1b5;
  --text-inverse: #101010;
  --border: var(--border-subtle);
  --control-bg: rgba(255, 255, 255, 0.035);
  --control-hover: var(--surface-hover);
  --control-border: rgba(234, 219, 186, 0.14);

  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.22);
  --shadow-panel: 0 24px 58px rgba(0, 0, 0, 0.32);
  --shadow-composer: 0 12px 30px rgba(0, 0, 0, 0.22);
  --focus-ring: 0 0 0 3px rgba(201, 164, 92, 0.16);

  --button-bg: rgba(255, 255, 255, 0.055);
  --button-border: rgba(234, 219, 186, 0.16);
  --button-text: #d6cec0;
  --button-hover-bg: rgba(255, 255, 255, 0.085);
  --button-hover-border: rgba(234, 219, 186, 0.22);
  --button-active-bg: rgba(201, 164, 92, 0.14);
  --button-pressed-bg: rgba(255, 255, 255, 0.07);
  --button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 8px 18px rgba(0, 0, 0, 0.14);
  --button-primary-bg: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(201,164,92,0.12));
  --button-primary-hover: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(201,164,92,0.18));
  --button-primary-border: rgba(201, 164, 92, 0.40);
  --button-primary-text: #e6c986;
  --button-secondary-bg: rgba(255, 255, 255, 0.045);
  --button-secondary-border: rgba(234, 219, 186, 0.18);
  --button-secondary-text: #d8d1c3;
  --button-ghost-bg: rgba(255, 255, 255, 0.026);
  --button-danger-bg: rgba(217, 92, 92, 0.10);
  --button-danger-border: rgba(217, 92, 92, 0.32);
  --button-danger-text: #e08a86;
  --button-focus-ring: var(--focus-ring);
}