/* Theme tokens — BASE layer.
   ════════════════════════════════════════════════════════════════════════
   tokens.css was split (session 37) into a base file + a tokens/ folder of
   per-family theme files:

     tokens-base.css              ← this file: theme-agnostic tokens + the bare
                                     :root default-paint alias (tuxedo's values).
                                     ALWAYS loads first.
     tokens/signature-styles.css  ← the Signature themes (tuxedo + its chrome,
                                     midnight, deep-blue, slate, pearl, oled,
                                     sanrio, kawaii).
     tokens/legacy-styles.css     ← the Legacy themes (Homeroom-ported) + chrome.

   Load order in the layouts: tokens-base → signature → legacy. The family files
   only define `:root[data-theme="<key>"]` selectors (disjoint by key), so their
   relative order doesn't matter; tokens-base must load first so the shared
   tokens and the default-paint alias are defined before anything overrides per
   theme.

   The bare :root below carries (a) the shared theme-agnostic tokens and (b) a
   copy of the DEFAULT theme's (tuxedo) color tokens, so first paint is never
   untokenized — even before app.js resolves the user's data-theme, and
   regardless of which family file loads next. The keyed
   `:root[data-theme="tuxedo"]` block itself lives in signature-styles.css; the
   values here MUST stay in sync with it (they're the same palette).

   Adding a new theme:
     1) Register it in app/lib/themes.php (themes_definitions()) with a
        `family` of 'signature' or 'legacy'.
     2) Add a :root[data-theme="<key>"] block to the matching family file,
        mirroring the variable set.
     3) Don't introduce new tokens here without also defining them in every theme.

   Hero / inset surfaces:
     --surface-hero / --ink-hero  → the always-darker inverted panel (Stripe-style hero card)
     --surface-inset / --ink-inset → light surface that nests inside the hero
     Used by .surface--hero / .surface--inset class modifiers in components.css. */

:root {
  /* ── Default-paint palette: a copy of tuxedo's color tokens (the default
        theme) so the bare :root is fully tokenized on first paint. Kept in
        sync with :root[data-theme="tuxedo"] in tokens/signature-styles.css. ── */
  --bg:        #edf1f5;   /* light page */
  --surface:   #fafcfd;   /* near-white card */
  --surface-2: #e1e6eb;

  --ink:       #0c1219;
  --ink-2:     #4a5360;
  --ink-3:     #6f7d8c;
  --ink-disabled: #bcc3cc;

  --border:        #d6dbe1;
  --border-strong: #bcc4cc;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(27, 148, 75, 0.45);

  --status-active:    #1b944b;
  --status-on-hold:   #6a7b85;
  --status-complete:  #3d7fa0;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fafcfd;
  --ink-inset:     #0c1219;

  /* ── Theme-agnostic tokens (identical across every theme) ── */

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs:     14px;
  --fs-md:  15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 26px;   /* page H1 (e.g. Clients, Users, Projects) */
  --fs-3xl: 32px;   /* welcome-style heading */
  --fs-4xl: 40px;   /* hero heading */

  --lh-tight:  1.25;
  --lh:        1.45;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radii — three-tier scale per xAI: dense=0, controls=6, cards=12, hero=18 */
  --r-none: 0;       /* dense rows: tables, list items, kanban-internal rows */
  --r-sm:   4px;     /* tiny chips */
  --r:      6px;     /* buttons, inputs, pills */
  --r-lg:   12px;    /* cards, panels, form-cards */
  --r-xl:   18px;    /* hero panels */

  /* Text color for elements that sit on a SATURATED brand-color background
     (primary button, accent badge, future severity-indicator components).
     White always reads on every brand color we use (accent green, warning
     amber, danger red), regardless of theme. */
  --ink-on-strong: #ffffff;


  /* Motion */
  --t-fast: 120ms ease;
  --t:      180ms ease;

  /* Layout */
  --nav-h:        56px;
  --rail-w:       240px;
  --content-max:  2560px;
}