/* mobile-tokens-v1 — W-26-1 — Saadjie design tokens (mobile-first MVP). */
/*
 * Planning: .archon/queued-builds/WAVE-26-mobile-responsiveness-mvp.md
 *
 * WHY this file exists: every other stylesheet in public/css/ MUST reference
 * colour, spacing, type-scale, and radii through `var(--token-*)` references
 * defined here. The wave's ANTI-RAW-VALUE proof-gate forbids raw hex / rgba
 * values in component CSS (the gate excludes this tokens file). Centralising
 * the palette here means a future wave (W56 design-tokens system) can swap
 * the source of truth without touching every component file.
 *
 * WHY mobile-first defaults: the MVP audience lives on Android phones (per
 * planning/17-stack-answers.md). The base font size, line-height, and
 * spacing scale are tuned for 320–414px viewports first; tablet + desktop
 * overrides land in component files via `@media (min-width: …)` queries.
 *
 * GOTCHA: --font-size-base MUST stay ≥ 16px on mobile. iOS Safari auto-zooms
 * any <input> rendered below 16px on focus — that zoom never reverses and
 * leaves the layout broken. Form partials in src/views/components/forms/
 * inherit this base size.
 *
 * CONSTRAINT: --touch-target-min is 44px (Apple HIG) / 48dp (Material). Every
 * interactive element (button, chip, link in nav) must satisfy this on
 * mobile. Component files use `min-height: var(--touch-target-min)` rather
 * than padding hacks so the rule travels with refactors.
 */

:root {
  /* ---------- Colour palette ---------- */
  /* WHY these values: Saadjie brand mid-blue (#3366aa) is already baked
     into src/views/public/profile.ejs as the default theme colour. The
     surrounding neutrals are a 5-step grayscale tuned for AA contrast on
     the brand blue. */
  --color-brand:           #3366aa;
  --color-brand-dark:      #264d80;
  --color-brand-light:     #e8eef7;

  --color-text:            #1a1a1a;
  --color-text-muted:      #555555;
  --color-text-inverse:    #ffffff;

  --color-bg:              #ffffff;
  --color-bg-subtle:       #f6f7f9;
  --color-bg-raised:       #ffffff;

  --color-border:          #d8dce3;
  --color-border-strong:   #aab0bb;

  --color-success:         #1e7e34;
  --color-success-bg:      #e6f4ea;
  --color-warning:         #b35c00;
  --color-warning-bg:      #fff4e5;
  --color-danger:          #b3261e;
  --color-danger-bg:       #fdecea;

  --color-focus-ring:      #3366aa;
  --color-shadow:          rgba(20, 24, 32, 0.12);
  --color-overlay:         rgba(20, 24, 32, 0.55);

  /* ---------- Spacing scale (4-pt grid) ----------
     WHY a 4-pt grid: matches Material's default rhythm and meshes with the
     44px touch target (11 × 4). Authors compose layouts from this scale
     instead of typing pixel values. */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */

  /* ---------- Type scale ----------
     WHY rem (not px): respects the user's browser font-size preference.
     The reset pins html { font-size: 100% } so 1rem === 16px by default. */
  --font-size-base:   1rem;       /* 16px  — body / inputs (iOS Safari floor) */
  --font-size-sm:     0.875rem;   /* 14px  — captions / meta lines only */
  --font-size-lg:     1.125rem;   /* 18px  — lead paragraphs */
  --font-size-xl:     1.25rem;    /* 20px  — h3 */
  --font-size-2xl:    1.5rem;     /* 24px  — h2 */
  --font-size-3xl:    1.875rem;   /* 30px  — h1 (mobile) */
  --font-size-4xl:    2.25rem;    /* 36px  — h1 (tablet+) */

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.7;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --font-family-base:
    system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Layout ----------
     WHY --container-max as a single number: every public + dashboard page
     uses one centered column at the same max width. Centralising it here
     keeps the breakpoint hand-off consistent. */
  --container-max:        72ch;     /* ~ 720px — comfortable reading column */
  --container-max-wide:   90ch;     /* admin queues + dashboard tables */
  --content-padding-x:    var(--space-4);

  /* ---------- Touch + a11y ---------- */
  --touch-target-min: 44px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---------- Motion ---------- */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;

  /* ---------- Z-index ladder ---------- */
  --z-base:      1;
  --z-raised:    10;
  --z-overlay:   100;
  --z-modal:     1000;
}

/* WHY a `prefers-color-scheme: dark` override is NOT shipped this wave:
   the W26 spec scopes the work to mobile responsiveness only; a dark-mode
   palette belongs with W56 (design tokens system). Components must NOT
   hard-code light-mode assumptions — using these tokens means a future
   dark-scheme override will Just Work. */