/* ═══════════════════════════════════════════════════════════════
   TALENTH DESIGN TOKENS
   Single source of truth for the whole product.
   The original mockups referenced variables that only existed in
   a preview sandbox (--font-sans, --color-text-primary, etc.).
   They are defined here for real, so every existing class keeps
   working — plus a full token scale for new components.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --navy: #003366;
  --cyan: #00A3B4;
  --dark: #0A2540;
  --cyan-hover: #00919f;
  --navy-hover: #00284f;

  /* ── Semantic colour: light theme ── */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f4f6f8;
  --color-background-tertiary: #eef1f4;
  --color-text-primary: #14202e;
  --color-text-secondary: #5b6b7b;
  --color-text-tertiary: #8b98a5;
  --color-border-secondary: #c9d2da;
  --color-border-tertiary: #e3e8ed;

  /* ── Status ── */
  --green-bg: #e1f5ee;   --green-fg: #0F6E56;
  --blue-bg:  #E6F1FB;   --blue-fg:  #185FA5;
  --amber-bg: #FAEEDA;   --amber-fg: #854F0B;
  --red-bg:   #FCEBEB;   --red-fg:   #A32D2D;
  --lime-bg:  #EAF3DE;   --lime-fg:  #3B6D11;

  /* ── Type ── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --text-xs: 11px;  --text-sm: 12px;  --text-base: 13px;
  --text-md: 14px;  --text-lg: 16px;  --text-xl: 20px;
  --text-2xl: 26px; --text-3xl: 34px;
  --leading-tight: 1.25; --leading-normal: 1.55; --leading-loose: 1.75;

  /* ── Space (4px rhythm) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ── Radius ── */
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 999px;

  /* ── Elevation (used sparingly — flat borders are the default) ── */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.16);

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  /* ── Layout ── */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --bottomnav-h: 60px;
  --content-max: 1120px;

  /* ── Mobile safe areas (PWA standalone) ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Respect users who prefer less motion — mandatory, not optional */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════ Dark theme ═══════════ */
[data-theme="dark"] {
  --color-text-primary: #EAF2F8;
  --color-text-secondary: #9DB2C4;
  --color-background-primary: #0F2A49;
  --color-background-secondary: #0B2036;
  --color-border-secondary: rgba(255,255,255,0.22);
  --color-border-tertiary: rgba(255,255,255,0.12);
  --blue-bg: rgba(24,95,165,0.28);
  --amber-bg: rgba(133,79,11,0.3);   --amber-fg: #E8B563;
  --red-bg: rgba(163,45,45,0.28);    --red-fg: #F08A8A;
  --lime-bg: rgba(59,109,17,0.3);    --lime-fg: #A5D77E;
  --blue-fg: #7FB5E8;
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--color-background-secondary); }