/* ============================================================
   tokens.css — Design Tokens & Fluid Responsive Foundation
   mission.gridnorth.co.nz v2.5.0

   Layer order declaration, Finsweet fluid responsive,
   primitive + semantic tokens, dark theme overrides.
   ============================================================ */

/* ── Cascade Layer Order (declared once, controls all specificity) ── */
@layer reset, base, themes, layouts, components, pages, overrides;

/* ── Finsweet Fluid Responsive Root ──
   Root font-size scales fluidly across 4 viewport segments.
   All rem values auto-scale. Must be OUTSIDE @layer.

   Breakpoints:
   - < 479px  → 12px min (mobile)
   - 479px    → 14px (small tablet)
   - 1440px   → 16px (desktop, 1rem = 16px)
   - 1920px+  → 18px (large screen)
   ───────────────────────────────────────────────────────────── */
html {
  font-size: calc(0.625rem + 0.4166666666666663vw);
}
@media screen and (max-width: 1920px) {
  html { font-size: calc(0.625rem + 0.4166666666666674vw); }
}
@media screen and (max-width: 1440px) {
  html { font-size: calc(0.812695109261863rem + 0.20811654526534862vw); }
}
@media screen and (max-width: 479px) {
  html { font-size: calc(0.7494769874476988rem + 0.836820083682008vw); }
}

/* ── 1. Primitive Tokens — raw design values ── */
:root {
  /* Color palette (Slate gray scale) */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-900: #0f172a;

  /* Accent colors */
  --color-red-500: #ef4444;
  --color-green-500: #22c55e;
  --color-amber-500: #f59e0b;
  --color-blue-500: #3b82f6;

  /* Spacing scale (4px base) */
  --space-3xs: 0.125rem;   /* 2px */
  --space-2xs: 0.25rem;    /* 4px */
  --space-xs: 0.375rem;    /* 6px */
  --space-s: 0.5rem;       /* 8px */
  --space-m: 0.75rem;      /* 12px */
  --space-l: 1rem;         /* 16px */
  --space-xl: 1.5rem;      /* 24px */
  --space-2xl: 2rem;       /* 32px */
  --space-3xl: 3rem;       /* 48px */

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  --text-xs: 0.625rem;     /* 10px */
  --text-s: 0.75rem;       /* 12px */
  --text-m: 0.875rem;      /* 14px */
  --text-l: 1rem;          /* 16px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 2rem;        /* 32px */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Radii */
  --radius-s: 3px;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-s: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-m: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-l: 0 10px 25px rgba(0,0,0,0.15);

  /* Transitions */
  --ease-default: 150ms ease;
  --ease-slow: 300ms ease;
}

/* ── 2. Semantic Tokens + Dark Theme ──
   Both light defaults and dark overrides live in @layer themes
   so specificity determines the winner ([data-theme="dark"] > :root).
   ─────────────────────────────────────────────────────────────── */
@layer themes {
  /* Light theme (default) */
  :root {
    --background: var(--color-slate-50);
    --foreground: var(--color-slate-900);
    --card: white;
    --card-foreground: var(--color-slate-900);
    --muted: var(--color-slate-100);
    --muted-foreground: var(--color-slate-500);
    --border: var(--color-slate-200);
    --input: var(--color-slate-200);
    --primary: var(--color-slate-900);
    --primary-foreground: var(--color-slate-50);
    --secondary: var(--color-slate-100);
    --secondary-foreground: var(--color-slate-900);
    --destructive: var(--color-red-500);
    --destructive-foreground: var(--color-slate-50);
    --accent: var(--color-slate-100);
    --accent-foreground: var(--color-slate-900);
    --ring: var(--color-slate-400);
    --success: var(--color-green-500);
    --warning: var(--color-amber-500);
    --radius: var(--radius-m);

    /* Layout (px for precision) */
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 56px;
  }

  /* Dark theme — overrides semantic tokens only */
  [data-theme="dark"] {
    --background: #000000;
    --foreground: var(--color-slate-100);
    --card: #111111;
    --card-foreground: var(--color-slate-100);
    --muted: #111111;
    --muted-foreground: var(--color-slate-400);
    --border: #222222;
    --input: #222222;
    --primary: var(--color-slate-200);
    --primary-foreground: #000000;
    --secondary: #1a1a1a;
    --secondary-foreground: var(--color-slate-100);
    --accent: #1a1a1a;
    --accent-foreground: var(--color-slate-100);
    --ring: #555555;
  }
}