/* ── StuGar · design tokens ──────────────────────────────────────────────────
   One definition for the values every page was previously re-declaring in its
   own <style> block. Link this BEFORE a page's inline styles:

       <link rel="stylesheet" href="/tokens.css">

   so a page can still override any token it genuinely needs (module accent,
   Planner's calendar palette). That ordering also makes adoption safe: a page
   that still declares its own :root simply wins until its block is removed.

   Dark mode is driven by html.dark, set by app-header.js (and mirrored by the
   dashboard + public share pages), so a theme chosen in one module holds
   everywhere.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces ­— bg is the page, surface the cards, surface2 the sunken fills */
  --bg:        #f4f4f8;
  --surface:   #ffffff;
  --surface2:  #eeeef4;
  --border:    #dde1ec;

  /* Text. --muted was #64748b, which failed WCAG AA (4.12:1) on --surface2 and
     4.34:1 on --bg. This passes on all three surfaces (4.9–5.7:1). */
  --text:      #0f172a;
  --muted:     #5d6779;

  /* Status. One name per meaning — pages previously used five names for three
     different greens (--success / --good / --ok / --green / --buy). */
  --success:   #10b981;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;

  /* Compatibility aliases so pages still referencing the old names keep working
     while they migrate. Remove a page's alias use, not the alias, until last. */
  --good:      var(--success);
  --ok:        var(--success);
  --green:     var(--success);

  /* Default accent. Each module overrides this with its own colour — that's
     deliberate identity, not drift. Must match the tile on the dashboard and
     SUBDOMAIN_APPS in server/index.js. */
  --accent:    #4f46e5;

  /* Radii — was 15 ad-hoc values across the app */
  --r-sm:  6px;
  --r-md:  9px;
  --r-lg:  12px;
  --r-pill: 999px;

  /* Elevation, tuned for a light ground. Several pages applied dark-tuned
     shadows (rgba(0,0,0,.3–.45)) in light mode, which read as heavy smudges. */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .10);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, .14);

  /* Spacing + layout */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --content-w: 980px;      /* was 480–1000px depending on the module */
  --page-pad: 14px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --fs-body:  .88rem;
  --fs-sm:    .8rem;
  --fs-xs:    .72rem;
  --fs-title: 1.05rem;
  --fs-h2:    .95rem;

  /* Focus. The app had no :focus-visible styling anywhere and 25 outline:none
     rules; components should use this ring. */
  --focus: 2px solid var(--accent);
  --focus-offset: 2px;
}

html.dark {
  --bg:        #0f1117;
  --surface:   #1a1d27;
  --surface2:  #22263a;
  --border:    #2e3347;

  --text:      #e8eaf6;
  /* was #7b85a0 — 4.06:1 on --surface2, below AA. This passes at 5.1:1. */
  --muted:     #8d97ae;

  /* Slightly lifted so they hold against the darker ground */
  --success:   #34d399;
  --warn:      #fbbf24;
  --danger:    #f87171;
  --info:      #60a5fa;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
}