/*
 * chat-tokens.css
 * Design-system variables for TalkStock AI chat outputs.
 * All other chat-*.css files read from here. No hex codes allowed
 * inside chat-typography/components/message-container/dashboard/news.
 */

:root {
  /* Typography scale */
  --type-h1: 20px;
  --type-h2: 18px;
  --type-h3: 14px;
  --type-body: 15px;
  --type-lead: 16px;
  --type-small: 13px;
  --type-label: 11px;
  --type-code: 13px;

  /* Text colors */
  --color-text-primary: #1C1917;
  --color-text-secondary: #44403C;
  --color-text-tertiary: #78716C;

  /* Backgrounds */
  --color-bg-canvas: #FAFAF7;
  --color-bg-subtle: #F5F5F4;
  --color-bg-raised: #FFFFFF;
  --color-border-default: #E7E5E4;

  /* Brand */
  --color-brand-500: #F97316;
  --color-brand-600: #E8590C;
  --color-brand-400: #FB923C;
  --color-brand-200: #FED7AA;
  --color-brand-accent: #C2410C;
  --color-brand-tint: rgba(249, 115, 22, 0.08);

  /* Finance semantic (Taiwan convention: up=red, down=green) */
  --color-price-up: #DC2626;
  --color-price-down: #059669;

  /* UI state semantic (international: success=green, danger=red) */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-success-fg: #065F46;
  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;
  --color-danger-fg: #7F1D1D;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-warning-fg: #78350F;
  --color-info: #3B82F6;
  --color-info-bg: #EFF6FF;
  --color-info-fg: #1E40AF;

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* Font family */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Reading font (overridable for dyslexia support) */
  --font-reading: var(--font-sans);

  /* === Claude-polish: alpha multiplier tokens (2026-04-20) === */
  --stroke-subtle: hsl(30 3.3% 11.8% / 0.15);
  --stroke-hairline: hsl(30 3.3% 11.8% / 0.25);
  --surface-code-inline: hsl(60 2.5% 23.3% / 0.05);

  /* === Claude-polish: code block theme === */
  --code-bg: #282c34;
  --code-fg: #abb2bf;
  --code-header-bg: #21252e;
  --code-header-fg: rgba(255, 255, 255, 0.7);

  /* === Claude-flat-flow 2026-04-21: 合法 serif 字型鏈 ===
     Source Serif 4（Adobe，SIL OFL）+ Noto Serif TC（Google/Adobe，SIL OFL），
     視覺上跟 Anthropic Serif 同類（modern serif for screen）。
     後備鏈：Georgia + 系統 CJK serif 字型，字型載入失敗仍維持 serif 質感。 */
  --font-claude-response: "Source Serif 4", "Noto Serif TC", "Noto Serif",
      Georgia, "Times New Roman", Times,
      "PingFang TC", "Microsoft JhengHei",
      "Hiragino Sans", "Yu Gothic", Meiryo,
      "PingFang SC", "Microsoft YaHei", serif;
  --color-code-inline-fg: hsl(0 58.6% 34.1%);  /* Claude 同款深紅 */
}

/* ===== Reading font override (accessibility) ===== */
[data-reading-font="opendyslexic"] {
  --font-reading: 'OpenDyslexic', var(--font-sans);
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --color-text-primary: #F5F5F4;
  --color-text-secondary: #D6D3D1;
  --color-text-tertiary: #A8A29E;
  --color-bg-canvas: #1C1917;
  --color-bg-subtle: #292524;
  --color-bg-raised: #1F1B17;
  --color-border-default: #44403C;
  --color-brand-accent: #FB923C;
  --color-brand-tint: rgba(249, 115, 22, 0.15);
  --color-price-up: #F87171;
  --color-price-down: #34D399;
  --color-success: #34D399;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-success-fg: #86EFAC;
  --color-danger: #F87171;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-fg: #FCA5A5;
  --color-warning: #FBBF24;
  --color-warning-bg: rgba(217, 119, 6, 0.12);
  --color-warning-fg: #FCD34D;
  --color-info: #60A5FA;
  --color-info-bg: rgba(59, 130, 246, 0.12);
  --color-info-fg: #93C5FD;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);

  /* === Claude-polish: alpha multiplier tokens (dark mode) === */
  --stroke-subtle: hsl(51 16.5% 84.5% / 0.15);
  --stroke-hairline: hsl(51 16.5% 84.5% / 0.30);
  --surface-code-inline: hsl(50 9% 73.7% / 0.08);
  /* code block theme: 維持不變（Atom One Dark 本來就是深色）*/

  /* Claude-flat-flow 2026-04-20: dark mode inline code 用亮紅 */
  --color-code-inline-fg: hsl(0 98.4% 75.1%);
}

/* ──────────────────────────────────────────────────────────────────────
   2026-04-24: Daltonized (deuteranopia-friendly) variants.
   Strategy II: 紅漲保留 / 綠跌改藍 (maintains 台股 intuition).
   Colors from CC restored-src/src/utils/theme.ts:359-434, 521-596.
   ────────────────────────────────────────────────────────────────────── */

[data-theme="dark-daltonized"] {
  /* Inherits dark base; only override green-sensitive colors */
  --color-text-primary: #F5F5F4;
  --color-text-secondary: #D6D3D1;
  --color-text-tertiary: #A8A29E;
  --color-bg-canvas: #1C1917;
  --color-bg-subtle: #292524;
  --color-bg-raised: #1F1B17;
  --color-border-default: #44403C;
  --color-brand-accent: #FB923C;
  --color-brand-tint: rgba(249, 115, 22, 0.15);
  --color-success:       rgb(51, 153, 255);      /* green → blue */
  --color-success-bg:    rgba(51, 153, 255, 0.12);
  --color-success-fg:    rgb(122, 180, 232);
  --color-danger:        rgb(255, 102, 102);     /* red preserved */
  --color-danger-bg:     rgba(255, 102, 102, 0.12);
  --color-danger-fg:     #FCA5A5;
  --color-warning:       rgb(255, 204, 0);       /* amber */
  --color-warning-bg:    rgba(255, 204, 0, 0.12);
  --color-warning-fg:    #FCD34D;
  --color-info:          rgb(122, 180, 232);
  --color-info-bg:       rgba(122, 180, 232, 0.12);
  --color-info-fg:       #93C5FD;
  --color-price-up:      #DC2626;                /* 紅漲 preserved */
  --color-price-down:    rgb(51, 153, 255);      /* 綠跌 → blue */
  --color-diff-added:    rgb(0, 68, 102);        /* diff green → dark blue */
  --color-diff-removed:  rgb(102, 0, 0);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --stroke-subtle: hsl(51 16.5% 84.5% / 0.15);
  --stroke-hairline: hsl(51 16.5% 84.5% / 0.30);
  --surface-code-inline: hsl(50 9% 73.7% / 0.08);
  --color-code-inline-fg: hsl(0 98.4% 75.1%);
}

[data-theme="light-daltonized"] {
  /* Inherits light base (:root); only override green-sensitive colors */
  --color-success:       rgb(0, 102, 153);
  --color-success-bg:    rgba(0, 102, 153, 0.08);
  --color-success-fg:    rgb(0, 68, 102);
  --color-danger:        rgb(204, 0, 0);
  --color-danger-bg:     rgba(204, 0, 0, 0.08);
  --color-danger-fg:     #7F1D1D;
  --color-warning:       rgb(255, 153, 0);
  --color-warning-bg:    rgba(255, 153, 0, 0.12);
  --color-warning-fg:    #78350F;
  --color-info:          rgb(37, 99, 235);
  --color-info-bg:       rgba(37, 99, 235, 0.08);
  --color-info-fg:       #1E40AF;
  --color-price-up:      #DC2626;                /* 紅漲 preserved */
  --color-price-down:    rgb(0, 102, 153);       /* 綠跌 → blue */
  --color-diff-added:    rgb(153, 204, 255);
  --color-diff-removed:  rgb(255, 204, 204);
}