/*
 * tokens.css — Merlin Design Tokens (Phase A of design system architecture refactor)
 *
 * Single source of truth for all CSS custom properties. Loaded FIRST in base.html
 * so every downstream stylesheet (mpower.css, pro-t.css, eventual components.css)
 * inherits these values via the cascade.
 *
 * This is the SWAP POINT for the design system:
 *   - Palette change → edit only this file
 *   - Typography change → edit only this file
 *   - Spacing / radii / shadow change → edit only this file
 *   - Dark mode population → fill the [data-theme="dark"] block below
 *   - Per-deployment Merlin replication → override this file in the new deployment
 *
 * Decision provenance:
 *   - Palette: ThomOS/Merlin/Design/2026-05-20_color_palettes.html (Refined Navy locked)
 *   - Typography: ThomOS/Merlin/Design/2026-05-20_typography.html (DM Sans locked)
 *   - Architecture: ThomOS/Merlin/Scopes/SOW_design_system_architecture_2026-05-20.md
 *
 * Do NOT add component styling, layout rules, or non-variable declarations to this
 * file. Token-only discipline keeps the swap point clean.
 */

:root {
  /* =================================================================
   * COLOR — page surfaces, borders, text
   * Locked 2026-05-20 after 8-variant sidebar iteration through cool /
   * blue / pure-neutral / slate options. Aged Cream Gray sidebar is
   * the warm cream-gray family ~7% darker than the original tan for
   * more presence against the navy primary.
   * ================================================================= */
  --pro-bg: #f4f3ef;
  --pro-card-bg: #fefdfa;
  --pro-sidebar-bg: #e3e0d8;   /* Warm cream-gray, slightly darkened 2026-06-09 */
  --pro-border: #e2dfd6;
  --pro-border-strong: #d9d4c1;
  /* Card border semantic tokens — Interaction Grammar contract pair
   * (GUIDE_merlin_design.md §3). --card-border-click marks the clickable
   * (mixed-surface register) rest border; --card-border-static marks the
   * non-clickable rest border. The contrast pair is the binary clickability
   * cue for card surfaces. */
  --card-border-click: #cec6b0;
  --card-border-static: var(--pro-border);
  --pro-text: #1a2233;
  --pro-text-secondary: #5a6478;
  --pro-text-muted: #7a7868;

  /* =================================================================
   * COLOR — primary (Refined Navy family)
   * Four lightness steps off the canonical primary, all on-palette.
   * ================================================================= */
  --pro-primary: #2e5687;          /* canonical primary navy */
  --pro-primary-light: #4978b0;    /* lighter — secondary emphasis, hover states */
  --pro-primary-dark: #1f3d63;     /* deeper — two-tone family pills (team vs agent) */
  --pro-primary-deepest: #11243f;  /* deepest — reset/destructive utility, still on-palette */
  --pro-brick: #7a2e2e;            /* deep adobe brick — severity / past-due / pipeline metric emphasis. On-palette warm-red, sits beside the navy family. Promoted from 16+ inline hardcodes 2026-06-10 (REF_merlin_design_drift_audit). */
  --pro-border-hover: #bdb39a;     /* warm cream-tan hover border — used by .type-tile, .integrity-tile, .bin-tile, .pipe-pill, .rank-table.past-due hover states. Promoted from 10+ inline hardcodes 2026-06-10. */

  /* =================================================================
   * COLOR — semantic (success / warning / error / info / neutral)
   * Tuned to the Refined Navy palette tonal register — muted, not
   * electric. Solid tones for heavy-emphasis pills; bg tones for soft
   * pills + tile backgrounds.
   * ================================================================= */
  --pro-success: #4a7c59;
  --pro-warning: #b08348;
  --pro-error:   #a04545;
  --pro-info:    #2e5687;
  --pro-neutral: #7a8895;
  --pro-success-bg: #e5ede7;
  --pro-warning-bg: #f3ead9;
  --pro-error-bg:   #efdfdf;
  --pro-info-bg:    #e2e9f1;
  --pro-neutral-bg: #ebedef;

  /* =================================================================
   * COLOR — chart palette (Refined Navy monochromatic ladder)
   * Three lightness steps of the same hue. Use for year-over-year
   * comparisons or "same metric, multiple series" charts. For
   * CATEGORICAL charts (phase distribution, status), prefer semantic
   * tokens so each category carries meaning.
   * ================================================================= */
  --pro-chart-1: #2e5687;  /* primary navy — current period / strongest series */
  --pro-chart-2: #7a9bc5;  /* mid navy — prior period */
  --pro-chart-3: #c1d3e3;  /* light navy — oldest period / lightest series */

  /* =================================================================
   * TYPOGRAPHY — single-family sans direction
   * DM Sans locked 2026-05-20 after iteration through 7 single-family
   * sans candidates (Manrope, Plus Jakarta Sans, Outfit, DM Sans, Sora,
   * Space Grotesk, Onest). Picked for institutional gravitas — slightly
   * tighter proportions and flatter terminals carry more visual density
   * than Manrope at the same nominal weight, better fit for a business
   * dashboard serving escrow clients, agents, auditors.
   *
   * Hierarchy comes from weight, size, and tracking — NOT family change.
   * --pro-serif retained as a token name for backward compatibility but
   * no longer encodes a serif/sans distinction.
   * ================================================================= */
  --pro-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pro-serif: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pro-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* =================================================================
   * LAYOUT DIMENSIONS — sidebar + header sizing tokens
   * Phase E-2 consolidation. Used by layout.css for shell positioning.
   * ================================================================= */
  --sidebar-width:     256px;
  --sidebar-collapsed:  64px;
  --header-height:      56px;

  /* =================================================================
   * SPACING — scale used by templates and components.css
   *
   * Phase E-1 consolidation (2026-05-20): canonical spacing tokens
   * migrated from mpower.css :root to tokens.css. Cascade order ensures
   * downstream stylesheets continue to resolve these via var(--space-*).
   * mpower.css's :root still defines these as a transitional duplicate;
   * removed when mpower.css is deleted at end of Phase E.
   * ================================================================= */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* =================================================================
   * BORDER RADIUS — scale used by templates and components.css
   * Phase E-1 consolidation. Same transitional-duplicate posture as spacing.
   * ================================================================= */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 20px;
  /* --radius (no suffix) — legacy alias used by some templates; resolves to --radius-md */
  --radius: var(--radius-md);

  /* =================================================================
   * LEGACY OVERRIDES — mpower.css token redirection
   *
   * mpower.css defined --accent and --font; templates referenced them.
   * --accent removed 2026-05-21 (zero remaining template references
   * after Phase E-3 token migration). --font retained — login.html
   * still references var(--font); convert to var(--pro-sans) when
   * login.html is next touched.
   * ================================================================= */
  --font:   var(--pro-sans);
}

/* =================================================================
 * DARK MODE — token set for [data-theme="dark"]
 *
 * Infrastructure only — values intentionally empty until dark mode is
 * a real need. To enable dark mode:
 *   1. Populate values below (typically: invert --pro-bg <-> --pro-text,
 *      darken card surfaces, brighten text, adjust borders)
 *   2. Wire a theme toggle that sets [data-theme="dark"] on <html> or <body>
 *   3. Validate every page renders correctly (per-page validation gate)
 *
 * Components and pages reference tokens via var(--pro-*); they
 * automatically pick up dark values when [data-theme="dark"] is active.
 * No component or template changes needed.
 * ================================================================= */
[data-theme="dark"] {
  /* Populate when dark mode is wanted. Example structure:
   * --pro-bg: #1a1f2b;
   * --pro-card-bg: #232936;
   * --pro-sidebar-bg: #1e2330;
   * --pro-border: #2d3344;
   * --pro-text: #e8e6e0;
   * --pro-text-secondary: #a8b0c0;
   * --pro-text-muted: #7a8290;
   * ... etc. for primary family, semantic, chart palette
   */
}