/* =============================================================================
   WFXL Design Tokens
   =============================================================================
   Industrial Luxury design language for construction management.
   All visual values defined here. Nothing hardcoded elsewhere.

   Brand DNA:
     Navy (#0a0f1a)  — authority, precision
     Blue (#2563eb)   — trust, technology
     Orange (#f97316)  — safety, energy, action
     Sharp corners (3px) — blueprint precision
     DM Sans + Anybody — professional + bold

   Usage: var(--token-name) everywhere. Never hardcode colors, sizes, or shadows.
   ============================================================================= */

:root {

  /* ===========================================================================
     BRAND COLORS — Industrial Luxury
     =========================================================================== */

  --il-navy:              #0a0f1a;
  --il-navy-mid:          #1a2744;
  --il-navy-accent:       #1e3a5f;
  --il-blue:              #2563eb;
  --il-blue-hover:        #1d4ed8;
  --il-blue-active:       #1e40af;
  --il-blue-focus:        rgba(37, 99, 235, 0.12);
  --il-blue-light:        rgba(37, 99, 235, 0.1);
  /* V7-B6: --il-blue is a LIGHT-surface brand blue. On the navy chrome it
     measures 2.87:1 against navy-mid (#1a2744) and 3.71 against navy — the
     "XL" in the wordmark on all 36 authenticated routes, plus the kiosk
     company line, were below bar. This is the on-dark sibling: 4.14 on
     navy-mid, 5.35 on navy, and still unmistakably the same brand blue.
     Use on navy chrome ONLY; --il-blue stays correct on light surfaces. */
  --il-blue-on-dark:      #4b83f5;
  --il-orange:            #f97316;
  --il-orange-hover:      #ea580c;
  --il-orange-active:     #c2410c;
  --il-orange-glow:       rgba(249, 115, 22, 0.35);
  --il-orange-light:      rgba(249, 115, 22, 0.1);
  /* V1-7: green-means-go clock semantics — success counterpart to the orange
     glow, for clock-IN CTAs (kiosk / field hero / PIN). */
  --color-success-glow:   rgba(22, 163, 74, 0.35);

  /* ===========================================================================
     SEMANTIC COLORS
     =========================================================================== */

  --color-primary:        var(--il-blue);
  --color-primary-hover:  var(--il-blue-hover);
  --color-primary-active: var(--il-blue-active);
  --color-primary-light:  var(--il-blue-light);
  --color-primary-focus:  rgba(37, 99, 235, 0.25);

  --color-secondary:      var(--il-navy);
  --color-accent:         var(--il-orange);
  --color-accent-hover:   var(--il-orange-hover);
  /* V7-B3: --il-orange (#f97316) is a SIGNAL colour, not a text substrate —
     white on it measures 2.80:1. Any accent fill that has to carry white text
     (avatars, active count badges, active toggles) uses -strong instead: 5.18.
     Keep --color-accent for bars, rules, icons and marks with no text on top.
     --color-on-accent was referenced by contracts.css but never defined, so it
     had been silently falling back to `white`; it is real now. */
  --color-accent-strong:  var(--il-orange-active);
  --color-on-accent:      var(--color-white);
  /* V7-B8: the recurring "active state" bug — a raw brand colour used as TEXT
     on a light tint of its own hue. --il-blue on the blue tint #e9effd landed
     at exactly 4.50 (admin/reports/documents rails), --il-orange on #f8f9fb at
     2.66 (PO tabs). These are the text-safe siblings: blue 5.82 on the tint /
     6.70 on white, orange 4.92 on #f8f9fb / 5.18 on white. Fills, bars,
     borders and underlines keep the bright brand tokens. */
  --color-primary-text:   var(--il-blue-hover);
  --color-accent-text:    var(--il-orange-active);

  --color-success:        #16a34a;
  --color-success-hover:  #15803d;
  --color-success-light:  rgba(22, 163, 74, 0.1);
  --color-success-bg:     #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-success-text:   #166534;

  --color-warning:        #f59e0b;
  --color-warning-hover:  #d97706;
  --color-warning-light:  rgba(245, 158, 11, 0.1);
  --color-warning-bg:     #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text:   #92400e;

  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;
  --color-danger-light:   rgba(220, 38, 38, 0.1);
  --color-danger-bg:      #fef2f2;
  --color-danger-border:  #fecaca;
  --color-danger-text:    #991b1b;

  --color-info:           #0ea5e9;
  --color-info-light:     rgba(14, 165, 233, 0.1);
  --color-info-bg:        #f0f9ff;
  --color-info-border:    #bae6fd;
  --color-info-text:      #075985;

  /* ===========================================================================
     NEUTRAL COLORS — Gray Scale
     =========================================================================== */

  --color-white:          #ffffff;
  --color-gray-50:        #f8fafc;
  --color-gray-100:       #f1f5f9;
  --color-gray-200:       #e2e8f0;
  --color-gray-300:       #cbd5e1;
  --color-gray-400:       #94a3b8;
  --color-gray-500:       #64748b;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1e293b;
  --color-gray-900:       #0f172a;
  --color-black:          #000000;

  /* ===========================================================================
     SURFACE & BACKGROUND
     =========================================================================== */

  --color-bg:             #f8f9fb;
  --color-bg-alt:         var(--color-gray-50);
  --color-surface:        var(--color-white);
  --color-surface-raised: var(--color-white);
  --color-surface-sunken: var(--color-gray-100);

  /* ===========================================================================
     V8-7 · LEGACY-NAME ALIASES — near-miss token names found in real use
     ===========================================================================
     A `var(--x)` with no fallback pointing at an undefined token does not warn;
     it silently DROPS the whole declaration. So these names represented 66
     properties that were written, reviewed and shipped, and never painted
     anything — the invisible half of the "documented but never built" class.
     Every one is a near miss for a token that does exist, so per the design-system
     rule ("tokens are aliased so legacy names resolve to the same value") they
     become aliases rather than 66 edits. Values chosen from how each was actually
     used, not from the name alone.

       --color-bg-subtle     x39  background / background-color / border-left
       --color-bg-secondary  x9   background
       --font-weight-regular x6   font-weight
       --color-bg-card       x3   background  (a card is the plain surface)
       --color-primary-tint  x3   background  (the blue wash)
       --color-bg-sunken     x2   background
       --font-mono           x2   font-family
     =========================================================================== */
  --color-bg-subtle:      var(--color-surface-sunken);
  --color-bg-secondary:   var(--color-surface-sunken);
  --color-bg-sunken:      var(--color-surface-sunken);
  --color-bg-card:        var(--color-surface);
  --color-primary-tint:   var(--color-primary-light);
  --font-weight-regular:  var(--font-weight-normal);
  --font-mono:            var(--font-family-mono);
  --color-surface-muted:  var(--color-gray-100);  /* alias for sunken — semantic clarity */
  --color-surface-hover:  var(--color-gray-50);

  /* ===========================================================================
     TEXT
     =========================================================================== */

  /* Text ramp passes WCAG AA on white: secondary 7.6:1, muted 4.8:1.
     Subtle is decorative-only (placeholders, disabled) — never body copy. */
  --color-text:           #111827;
  --color-text-primary:   #111827;   /* alias for --color-text — clarifies intent */
  --color-text-secondary: #475569;
  /* V7-B1: was #64748b, which measured 4.34:1 on --color-surface-subtle
     (#f1f5f9) — under the 4.5 bar for body text, and it is the single most
     reused text colour in the app (25+ distinct failing runs across 30
     routes: table headers, KPI sublabels, hints, timestamps, code samples).
     #5a6980 clears the bar on every surface it actually lands on:
     #f1f5f9 5.09 · #ffffff 5.57 · #e9effd 4.84 · #fef2f2 5.10.
     Light surfaces only — on dark, use --color-text-on-dark-muted. */
  --color-text-muted:     #5a6980;
  --color-text-subtle:    #94a3b8;
  --color-text-inverse:   #ffffff;
  --color-on-primary:     #ffffff;   /* text/icons on --color-primary surfaces */
  --color-text-on-dark:   #e2e8f0;
  --color-text-on-dark-muted: rgba(226, 232, 240, 0.78);
  --color-text-link:      var(--il-blue);
  --color-text-link-hover: var(--il-blue-hover);

  /* Dark surface overlays — for elements on navy backgrounds */
  --color-dark-border:    rgba(148, 163, 184, 0.12);
  --color-dark-hover:     rgba(255, 255, 255, 0.08);
  --color-dark-hover-strong: rgba(255, 255, 255, 0.12);
  --color-dark-divider:   rgba(255, 255, 255, 0.1);
  --color-backdrop:       rgba(10, 15, 26, 0.6);  /* Modal/overlay backdrop */

  /* ===========================================================================
     BORDER
     =========================================================================== */

  --color-border:         #cbd5e1;
  --color-border-light:   #e2e8f0;
  --color-border-subtle:  #e2e8f0;  /* alias for --color-border-light */
  --color-border-strong:  #94a3b8;

  /* ===========================================================================
     STATUS BADGES — Construction-specific
     deprecated — V1-8: migrated app-wide to the --intent-* system; kept as
     compat aliases only. Do not add new references.
     =========================================================================== */

  --badge-active-bg:      rgba(22, 163, 74, 0.12);
  --badge-active-text:    #166534;
  --badge-pending-bg:     rgba(245, 158, 11, 0.12);
  --badge-pending-text:   #92400e;
  --badge-draft-bg:       rgba(100, 116, 139, 0.12);
  --badge-draft-text:     #475569;
  --badge-approved-bg:    rgba(22, 163, 74, 0.12);
  --badge-approved-text:  #166534;
  --badge-rejected-bg:    rgba(220, 38, 38, 0.12);
  --badge-rejected-text:  #991b1b;
  --badge-completed-bg:   rgba(37, 99, 235, 0.12);
  --badge-completed-text: #1e40af;
  --badge-synced-bg:      rgba(14, 165, 233, 0.12);
  --badge-synced-text:    #075985;

  /* ===========================================================================
     TYPOGRAPHY
     =========================================================================== */

  --font-family-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display:  'Anybody', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono:     'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  --font-size-2xs:        0.625rem;   /* 10px — ultra-dense sub-rows / unit labels */
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.8125rem;  /* 13px */
  --font-size-base:       0.875rem;   /* 14px — construction UIs are data-dense */
  --font-size-md:         1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        2rem;       /* 32px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:  0.04em;
  --letter-spacing-caps:  0.08em;

  /* ===========================================================================
     SPACING — 4px Grid
     =========================================================================== */

  --space-0:    0;
  --space-px:   1px;
  --space-0_5:  0.125rem;  /* 2px — half-grid step for dense editor sub-rows */
  --space-1:    0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ===========================================================================
     BORDERS & RADIUS — Industrial Precision (M-20: tightened)
     =========================================================================== */

  --radius-none: 0;
  --radius-sm:   0;       /* sharp — chips, tags, compact pills */
  --radius:      1px;     /* THE WFXL standard — blueprint-precise */
  --radius-md:   1px;     /* alias for default */
  --radius-lg:   2px;     /* cards, panels, inputs */
  --radius-xl:   3px;     /* modals, large surfaces */
  --radius-pill: 6px;     /* M-21 W14: status pills + badge-like surfaces — chunky pill, not full oval */
  --radius-full: 9999px;  /* circles + spinner-style avatars */

  --border-width:      1px;
  --border-width-thin: 1px;   /* alias for default — semantic at call site */

  /* Stroke widths — for left-edge accent indicators, focus rings, dividers */
  --stroke-width-thin:   1px;
  --stroke-width-base:   2px;
  --stroke-width-accent: 3px;

  /* ===========================================================================
     SHADOWS — Subtle Depth
     deprecated — V1-8: migrated app-wide to --elevation-* (depth) and
     --focus-ring-* (focus); kept as compat aliases only.
     =========================================================================== */

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:       0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-focus);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.25);

  /* ===========================================================================
     TRANSITIONS — Industrial Easing
     =========================================================================== */

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);  /* IL signature easing */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 400ms;

  --transition-fast:   var(--duration-fast) var(--ease);
  --transition-base:   var(--duration-base) var(--ease);
  --transition-slow:   var(--duration-slow) var(--ease);

  /* ===========================================================================
     Z-INDEX SCALE
     =========================================================================== */

  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-navbar:    1030;
  --z-backdrop:  1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-tooltip:   1070;
  --z-toast:     2000;

  /* Canvas-layer stacking — local to editor surfaces (takeoff, future diagrams).
     Lives BELOW --z-dropdown so global chrome (toasts, modals, navbar) always wins.
       canvas-base       0–10  default Konva stage
       canvas-floater    20    docked panel
       canvas-floater-stub  21 reopen tab on edge rail
       canvas-floater-floating 25 dragged-out floater (above docked siblings)
       canvas-floater-merged-tab 26 merged-tab strip
       canvas-overlay    30    canvas-tied overlays (selection chips, hover)
       canvas-ribbon     40    classify shelf, unclassified ribbon
       canvas-popover    60    in-canvas popovers (stamp, symbol, text-format) */
  --z-canvas-floater:           20;
  --z-canvas-floater-stub:      21;
  --z-canvas-floater-floating:  25;
  --z-canvas-floater-merged-tab: 26;
  --z-canvas-overlay:           30;
  --z-canvas-ribbon:            40;
  --z-canvas-popover:           60;

  /* ===========================================================================
     COMPONENT SIZES
     =========================================================================== */

  --navbar-height:  48px;

  --btn-height-sm:  28px;
  --btn-height:     36px;
  --btn-height-lg:  44px;

  --input-height-sm: 32px;
  --input-height:    36px;
  --input-height-lg: 44px;

  --icon-btn-size:   32px;
  --touch-target:    44px;   /* mobile minimum */

  /* ===========================================================================
     GRID
     =========================================================================== */

  --grid-gap:     var(--space-4);
  --grid-gap-sm:  var(--space-2);
  --grid-gap-lg:  var(--space-6);

  --page-padding:         var(--space-6);
  --page-padding-mobile:  var(--space-4);
  --content-max-width:    1400px;

  /* M-29 Wave F — page content max-widths (the "too wide" fix).
     --page-content-max:        main content cap on every WFXL page. 1280px
                                 is the typographic sweet spot — wide enough
                                 for dashboards/tables, narrow enough that
                                 reading lines stay <90ch on prose surfaces.
     --page-content-max-narrow: forms + onboarding + auth pages. 880px keeps
                                 inputs at human-grabable sizes.
     --reading-max:             prose blocks (transcripts, summaries, comments)
                                 capped at ~72ch — the optimal line length for
                                 sustained reading. */
  --page-content-max:        1280px;
  --page-content-max-narrow: 880px;
  --reading-max:             72ch;

  /* ===========================================================================
     M-20: SEMANTIC INTENT TRIPLETS
     ===========================================================================
     Single source of truth for status-tinted surfaces (pills, alerts, hint
     banners, table-row highlights, KPI accents). Pull these instead of the
     legacy --color-success-bg / --badge-* tokens going forward.
     =========================================================================== */

  --intent-success-bg:     var(--color-success-bg);
  --intent-success-text:   var(--color-success-text);
  --intent-success-fg:     var(--color-success-text);    /* alias — fg = foreground role */
  --intent-success-border: var(--color-success-border);

  --intent-warning-bg:     var(--color-warning-bg);
  --intent-warning-bg-soft: var(--color-warning-light);  /* lighter tint for hint banners */
  --intent-warning-text:   var(--color-warning-text);
  --intent-warning-fg:     var(--color-warning-text);    /* alias — fg = foreground role */
  --intent-warning-border: var(--color-warning-border);

  --intent-danger-bg:      var(--color-danger-bg);
  --intent-danger-text:    var(--color-danger-text);
  --intent-danger-fg:      var(--color-danger-text);     /* alias — fg = foreground role */
  --intent-danger-border:  var(--color-danger-border);

  --intent-info-bg:        var(--color-info-bg);
  --intent-info-text:      var(--color-info-text);
  --intent-info-fg:        var(--color-info-text);       /* alias — fg = foreground role */
  --intent-info-border:    var(--color-info-border);

  --intent-neutral-bg:     var(--color-gray-100);
  --intent-neutral-text:   var(--color-gray-700);
  --intent-neutral-border: var(--color-gray-300);

  /* ===========================================================================
     M-20: ELEVATION SYSTEM
     ===========================================================================
     Four-level depth scale. Replaces ad-hoc per-module box-shadow values.
     Existing --shadow-* tokens kept as compat aliases (still referenced by
     legacy components — to be migrated in 20.3).
       elevation-0  flat surface (no lift)
       elevation-1  raised card (default cards, KPI tiles)
       elevation-2  popover / dropdown / sticky chrome
       elevation-3  modal / drawer / overlay
     =========================================================================== */

  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --elevation-2: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --elevation-3: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);
  --elevation-4: 0 25px 50px rgba(15, 23, 42, 0.15), 0 12px 24px rgba(15, 23, 42, 0.08); /* dragged-out / pinned floaters */

  /* ===========================================================================
     M-20: FOCUS-RING VARIANTS
     ===========================================================================
     Accessibility focus indicators by intent + surface. Use these on
     :focus-visible everywhere. --shadow-focus / --shadow-focus-danger above
     remain as compat aliases.
     =========================================================================== */

  --focus-ring-default: 0 0 0 3px var(--color-primary-focus);
  --focus-ring-error:   0 0 0 3px rgba(220, 38, 38, 0.30);
  --focus-ring-success: 0 0 0 3px rgba(22, 163, 74, 0.28);
  --focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.40);

  /* ===========================================================================
     M-20: DISABLED-STATE TOKENS
     =========================================================================== */

  --color-disabled:    var(--color-gray-400);
  --color-disabled-bg: var(--color-gray-100);
  --opacity-disabled:  0.55;

  /* ===========================================================================
     M-20: NAMED MOTION TOKENS
     ===========================================================================
     Composed shorthands for the 4 animation patterns we use repeatedly.
     Compose duration + easing primitives — never write raw cubic-bezier values
     in component CSS again.
     =========================================================================== */

  --motion-fade-in:       var(--duration-base) var(--ease-out);
  --motion-slide-up:      var(--duration-slow) var(--ease);
  --motion-expand:        var(--duration-base) var(--ease-in-out);
  --motion-drawer-slide:  var(--duration-slow) var(--ease);

  /* ===========================================================================
     M-20: DENSITY VARIANT TOKENS — comfortable (default)
     ===========================================================================
     Compact sibling tokens defined here so :root callers can opt in by name
     even without a [data-density] toggle. The [data-density="compact"] block
     below remaps the canonical --space-component-* / --btn-height / etc. to
     compact values app-wide.
     =========================================================================== */

  --space-component-x:           var(--space-3);   /* 12px — buttons, inputs default */
  --space-component-y:           var(--space-2);   /* 8px */
  --space-component-compact-x:   var(--space-2);   /* 8px */
  --space-component-compact-y:   0.375rem;         /* 6px */

  /* V1-2: uniform table-row rhythm — height acts as a minimum in table
     layout; short rows rise to this baseline so badge-stacked rows don't
     read as outliers. Remapped in the compact block below. */
  --table-row-min-height:        44px;

  /* M-21 W13: Money + table tokens (system-wide finance UI primitives)
     These tokens come from the QBO Profitability audit. Money values across
     the app should pull from these instead of per-module color decisions.
     Zero-state ($0.00 = no data yet) gets its own muted treatment so it
     reads differently from a confirmed zero. */
  --money-positive:    var(--intent-success-text);
  --money-negative:    var(--intent-danger-text);
  --money-warning:     var(--intent-warning-text);
  --money-pending:     var(--color-text-muted);
  --money-zero:        var(--color-text-muted);

  /* Table interaction baseline — every .data-table inherits these */
  --row-hover-bg:        rgba(37, 99, 235, 0.04);
  --row-hover-border:    var(--il-blue);
  --table-foot-bg:       var(--color-gray-50);
  --table-foot-border:   2px solid var(--il-navy);
  --table-th-sticky-bg:  var(--color-surface);

  /* Row status indicator (left border 3px) — for health-tinted rows
     in finance / status tables (margin health, sync state, alert level) */
  --row-status-success: 3px solid var(--intent-success-text);
  --row-status-warning: 3px solid var(--intent-warning-text);
  --row-status-danger:  3px solid var(--intent-danger-text);
  --row-status-info:    3px solid var(--intent-info-text);

  --btn-height-compact:          28px;
  --input-height-compact:        28px;
  --font-size-base-compact:      0.8125rem;        /* 13px */
  --font-size-sm-compact:        0.75rem;          /* 12px */

  /* Section/toolbar/card structural tokens — let density mode tighten chrome,
     not just controls. Components reference --section-padding etc. instead of
     raw --space-* so compact mode genuinely feels compact. */
  --section-padding-y: var(--space-6);
  --section-padding-x: var(--space-6);
  --section-gap:       var(--space-5);
  --section-head-mb:   var(--space-5);

  --toolbar-padding-y: var(--space-5);
  --toolbar-padding-x: var(--space-6);

  --card-padding-y:    var(--space-4);
  --card-padding-x:    var(--space-4);

  /* ===========================================================================
     M-21 W14: BREAKPOINT TOKENS
     ===========================================================================
     Five canonical breakpoints. Replaces 11 distinct ad-hoc values that were
     scattered across CSS (400/480/600/640/720/767/768/840/900/1024/1100).

     Consolidation map:
       400/480/600/640    → --bp-sm  (640px)   "large phone, phablet"
       720/767/768/840    → --bp-md  (768px)   "tablet portrait, iPad mini"
       900/1024           → --bp-lg  (1024px)  "tablet landscape, iPad"
       1100/1280          → --bp-xl  (1280px)  "desktop"
       —                  → --bp-2xl (1536px)  "large desktop, 1080p+"

     1920×1080 sits above --bp-2xl; --content-max-width: 1400px caps layout.
     Mobile-first: prefer @media (min-width: var(--bp-md)) over max-width.
     =========================================================================== */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* Touch-target alias — clarifies intent at call sites (paired with the
     --touch-target token above which is kept for compat). */
  --touch-target-min: var(--touch-target);

  /* ===========================================================================
     M-21 W14: ADDITIONAL MOTION TOKENS
     =========================================================================== */

  --motion-pane-resize: var(--duration-base) var(--ease-out);
  --motion-disclosure:  var(--duration-base) var(--ease-out);
  --motion-floater:     220ms var(--ease-out);  /* floater open/close slide */
  --motion-popover:     var(--duration-fast) var(--ease-out);  /* in-canvas popover fade */

  /* Sticky chrome elevation bump — composed with .is-stuck modifier driven
     by the StickyObserver helper. */
  --elevation-stuck: var(--elevation-2);

  /* ===========================================================================
     M-21 W14: MONEY DISPLAY TYPOGRAPHY
     ===========================================================================
     W13 shipped color tokens for money. W14 adds typographic primitives so
     a .money--display variant can deliver display-font + tabular-nums + bold
     (consistent with KPI tile numerals). */

  --money-display-font:   var(--font-family-display);
  --money-display-weight: var(--font-weight-bold);
  --money-display-size:   var(--font-size-base);

  /* ===========================================================================
     M-21 W14: SKELETON LOADING TOKENS
     =========================================================================== */

  --skeleton-shimmer-duration: 1.4s;
  --skeleton-base-bg:    var(--color-gray-100);
  --skeleton-shimmer-bg: var(--color-gray-50);
  --loading-overlay-bg:  rgba(255, 255, 255, 0.6);

  /* ===========================================================================
     M-21 W14: STICKY TABLE Z-INDEX
     ===========================================================================
     Local stack within tables — keep low so they don't escape the page
     stacking context (--z-sticky: 1020 is for chrome above the table). */

  --z-sticky-col: 1;
  --z-sticky-row: 2;
}

/* =============================================================================
   M-20: COMPACT DENSITY MODE
   =============================================================================
   Opt-in via <html data-density="compact"> (persisted in user_preferences in
   20.7). Remaps the canonical sizing tokens to their compact siblings — every
   component that already references var(--btn-height) / var(--input-height) /
   var(--font-size-base) auto-tightens.
   ============================================================================= */

[data-density="compact"] {
  --space-component-x:  var(--space-component-compact-x);
  --space-component-y:  var(--space-component-compact-y);

  --btn-height-sm:      24px;
  --btn-height:         28px;
  --btn-height-lg:      36px;

  --input-height-sm:    26px;
  --input-height:       28px;
  --input-height-lg:    36px;

  --icon-btn-size:      26px;

  --table-row-min-height: 34px;   /* V1-2 — density-aware row rhythm */

  --font-size-base:     var(--font-size-base-compact);
  --font-size-sm:       var(--font-size-sm-compact);

  --page-padding:        var(--space-4);
  --page-padding-mobile: var(--space-3);

  --grid-gap:    var(--space-3);
  --grid-gap-sm: var(--space-1);
  --grid-gap-lg: var(--space-4);

  /* Section / toolbar / card chrome tightening — the difference between an
     opt-in density mode that "feels real" vs one that only changes form
     controls. */
  --section-padding-y: var(--space-3);
  --section-padding-x: var(--space-4);
  --section-gap:       var(--space-2);
  --section-head-mb:   var(--space-3);

  --toolbar-padding-y: var(--space-3);
  --toolbar-padding-x: var(--space-4);

  --card-padding-y:    var(--space-2);
  --card-padding-x:    var(--space-3);
}