/* variables.css — design tokens. Single place to retheme the whole site. */
:root {
  /* Black & White base — monochrome ink, with semantic accent colors only */
  --primary: #18181b;        /* ink: primary actions, active states, accents */
  --primary-600: #000000;
  --primary-700: #000000;
  --primary-soft: #f4f4f5;   /* subtle fill behind active tabs / icons */
  --on-primary: #ffffff;     /* text/icon sitting on a primary fill */
  --accent: #3f3f46;         /* secondary gradient stop (graphite) */

  --secondary: #27272a;
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #09090b;
  --muted: #5b5b63;
  --muted-2: #6b6b73;   /* AA-safe small-text grey on white/surfaces */

  --success: #16a34a;        /* green — savings, success */
  --danger: #dc2626;         /* red — errors */
  --warning: #d97706;        /* amber — warnings */

  /* Gradients (monochrome) */
  --grad-brand: linear-gradient(135deg, #18181b 0%, #3f3f46 100%);
  --grad-hero: radial-gradient(1200px 600px at 80% -10%, #f4f4f5 0%, transparent 60%),
               radial-gradient(900px 500px at 0% 0%, #e4e4e7 0%, transparent 55%);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.25rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* Shadows (neutral, no colour) */
  --sh-sm: 0 1px 2px rgba(9, 9, 11, 0.06), 0 1px 3px rgba(9, 9, 11, 0.08);
  --sh-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 2px 4px rgba(9, 9, 11, 0.04);
  --sh-lg: 0 18px 40px -12px rgba(9, 9, 11, 0.18);
  --sh-glow: 0 10px 30px -10px rgba(9, 9, 11, 0.35);

  --container: 1180px;
  --nav-h: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --surface: #141414;
    --surface-2: #1c1c1c;
    --border: #262626;
    --border-strong: #3a3a3a;
    --text: #fafafa;
    --muted: #b4b4b8;
    --muted-2: #9a9aa3;   /* AA-safe small-text grey on near-black/panels */
    --secondary: #d4d4d8;        /* keep hero gradient text light on dark */

    /* In dark mode the ink inverts to white; text on it goes dark */
    --primary: #fafafa;
    --on-primary: #0a0a0a;
    --primary-soft: #1f1f1f;
    --accent: #d4d4d4;
    --grad-brand: linear-gradient(135deg, #fafafa 0%, #d4d4d4 100%);
    --grad-hero: radial-gradient(1200px 600px at 80% -10%, #1a1a1a 0%, transparent 60%),
                 radial-gradient(900px 500px at 0% 0%, #161616 0%, transparent 55%);
    --sh-lg: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
    --sh-glow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  }
}