/* ═══════════════════════════════════════════════════════
   Tahlix Design Tokens
   Calm precision with deliberate warmth.
   ═══════════════════════════════════════════════════════ */

:root {
  --font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 3rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height: 1.5;
  --line-height-tight: 1.2;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.06em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-full: 9999px;

  /* Semantic radii — centralize values that were previously hardcoded */
  --radius-card: 16px;      /* compact cards, chips, avatars */
  --radius-field: 18px;     /* inputs, list items */
  --radius-bubble: 22px;    /* chat bubbles */
  --radius-container: 24px; /* table/chart/result cards */
  --radius-panel: 30px;     /* side panels */
  --radius-panel-lg: 32px;  /* main panels */

  --transition-fast: 120ms ease;
  --transition-base: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-colors: color 300ms ease, background-color 300ms ease, border-color 300ms ease, fill 300ms ease, stroke 300ms ease;

  --sidebar-width-collapsed: 82px;
  --sidebar-width-expanded: 260px;
  --header-height: 72px;
  --chat-panel-width: 288px;
  --content-max-width: 1480px;
  --shell-gutter: 24px;
  --shell-gutter-mobile: 14px;
}

[data-theme="light"],
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F4F1EA;
  --bg-tertiary: #ECE6DC;
  --bg-surface: rgba(255, 255, 255, 0.78);
  --bg-hover: rgba(22, 24, 29, 0.045);
  --bg-active: rgba(22, 24, 29, 0.08);
  --bg-card: rgba(255, 255, 255, 0.86);
  --bg-input: rgba(255, 255, 255, 0.9);
  --bg-code: #F6F0E6;
  --bg-elevated: rgba(255, 255, 255, 0.94);

  --text-primary: #17181B;
  --text-secondary: #686C74;
  --text-tertiary: #6E7178; /* darkened for WCAG AA (~4.7:1 on light) */
  --text-inverse: #FFFFFF;

  --accent: #007AFF;
  --accent-hover: #0063CC;
  --accent-light: rgba(0, 122, 255, 0.1);
  --accent-text: #007AFF;
  --accent-subtle: rgba(0, 122, 255, 0.14);
  --accent-strong: #0052A8;

  --border: rgba(27, 31, 38, 0.14);
  --border-light: rgba(27, 31, 38, 0.08);
  --border-focus: #007AFF;

  --success: #34C759;
  --success-light: rgba(52, 199, 89, 0.12);
  --warning: #D97706;
  --warning-light: rgba(217, 119, 6, 0.12);
  --error: #DC2626;
  --error-light: rgba(220, 38, 38, 0.1);

  --shadow-xs: 0 1px 2px rgba(23, 24, 27, 0.05);
  --shadow-sm: 0 10px 24px rgba(23, 24, 27, 0.06);
  --shadow-md: 0 18px 46px rgba(23, 24, 27, 0.09);
  --shadow-lg: 0 28px 80px rgba(23, 24, 27, 0.14);
  --shadow-glow: 0 0 0 4px rgba(0, 122, 255, 0.14);

  --scrollbar-thumb: rgba(23, 24, 27, 0.14);
  --scrollbar-track: transparent;

  --overlay: rgba(18, 19, 24, 0.28);
  --glass: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.44);
  --ambient-1: rgba(0, 122, 255, 0.12);
  --ambient-2: rgba(255, 255, 255, 0.7);
  --ambient-3: rgba(0, 122, 255, 0.08);

  --user-bubble: #007AFF;
  --user-bubble-text: #FFFFFF;
  --ai-bubble: #F7F4EE;
  --ai-bubble-text: #17181B;
}

[data-theme="dark"] {
  --bg-primary: #17181B;
  --bg-secondary: #101113;
  --bg-tertiary: #202227;
  --bg-surface: rgba(24, 26, 31, 0.82);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);
  --bg-card: rgba(27, 29, 34, 0.86);
  --bg-input: rgba(33, 35, 40, 0.92);
  --bg-code: #101113;
  --bg-elevated: rgba(32, 34, 39, 0.95);

  --text-primary: #F5F3ED;
  --text-secondary: #ACA89F;
  --text-tertiary: #9498A0; /* lightened for WCAG AA on dark */
  --text-inverse: #17181B;

  --accent: #4DA3FF;
  --accent-hover: #6FB4FF;
  --accent-light: rgba(77, 163, 255, 0.12);
  --accent-text: #8AB4F8;
  --accent-subtle: rgba(77, 163, 255, 0.18);
  --accent-strong: #A9CCFF;

  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.06);
  --border-focus: #4DA3FF;

  --success: #30D158;
  --success-light: rgba(48, 209, 88, 0.12);
  --warning: #FFB020;
  --warning-light: rgba(255, 176, 32, 0.16);
  --error: #FF5D52;
  --error-light: rgba(255, 93, 82, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 14px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 22px 48px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 40px 92px rgba(0, 0, 0, 0.42);
  --shadow-glow: 0 0 0 4px rgba(77, 163, 255, 0.18);

  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-track: transparent;

  --overlay: rgba(0, 0, 0, 0.5);
  --glass: rgba(18, 19, 23, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --ambient-1: rgba(77, 163, 255, 0.12);
  --ambient-2: rgba(13, 14, 17, 0.82);
  --ambient-3: rgba(77, 163, 255, 0.06);

  --user-bubble: #0A84FF;
  --user-bubble-text: #FFFFFF;
  --ai-bubble: #212329;
  --ai-bubble-text: #F5F3ED;
}