/* ---------------------------------------------------------------------
   WorkReef design tokens — single source of truth across the platform.
   Mirrored from workreef/marketing/site/src/index.css; if the marketing
   palette shifts, update both files together.

   :root  = reef-light (warm paper, reef-teal, coral) — the brand default.
   [data-theme="dark"]  = reef-dark (deep-ocean navy, reef-teal accent).
   theme.js toggles data-theme between "reef" (falls through to :root) and "dark".

   Load order: linked from base.html, workspace.html, and
   _platform_shell.html BEFORE each template's inline <style> block so
   per-template overrides still win when intentional.
   --------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* ----- WorkReef palette — reef-light (the brand default) ----------- */

  /* Surfaces — warm paper canvas → recessed → tertiary → elevated white. */
  --wr-bg:               #F3EFE7;
  --wr-bg-secondary:     #ECE6D9;
  --wr-bg-tertiary:      #E4DCCB;
  --wr-surface:          #FFFFFF;
  --wr-surface-raised:   #FFFFFF;
  --wr-surface-inset:    #FBF8F2;

  /* Ink — deep-ocean headline fading to soft reef-grey whisper. */
  --wr-text:             #0E2A30;
  --wr-text-muted:       #4C6063;
  --wr-text-subtle:      #768789;
  --wr-text-whisper:     #90A0A1;

  /* Brand — reef-teal structure and the primary interactive accent. */
  --wr-primary-1:        #0F8A86;
  --wr-primary-2:        #0C726F;
  --wr-primary-3:        #0A5F5C;
  --wr-on-primary:       #FFFFFF;   /* text/glyph on the primary accent (buttons, avatars) */
  --wr-primary-gradient: linear-gradient(135deg, var(--wr-primary-1) 0%, var(--wr-primary-2) 50%, var(--wr-primary-3) 100%);

  /* Accent — coral for energy (key CTAs, the live pulse). Distinct from teal. */
  --wr-accent-1:         #F2613F;
  --wr-accent-2:         #E0512F;
  --wr-coral:            #F2613F;
  --wr-coral-soft:       rgba(242, 97, 63, 0.12);
  --wr-accent-gradient:  linear-gradient(135deg, var(--wr-accent-1) 0%, var(--wr-accent-2) 100%);

  /* Warm — kelp gold for learning and the secondary warm accent. */
  --wr-warm:             #C8841F;
  --wr-warm-soft:        rgba(200, 132, 31, 0.10);

  /* Ocean — single-color interactive accent (links, info chips, focus rings). */
  --wr-ocean:            #0F8A86;

  /* Graph viz palette — three coordinated tones for nodes / agents / categories.
     Used by the network_graph primitive's node fills + edge strokes. */
  --wr-node-cyan:        #2D6299;
  --wr-node-violet:      #5A6EAE;
  --wr-node-magenta:     #B84070;

  /* Categorical palette — qualitative hues for charts/legends where the
     color encodes a CATEGORY (meeting intent classes, etc.), not a
     semantic state. Distinct + evenly-spaced so adjacent categories stay
     legible. Use the semantic tokens (--wr-ok/warn/error) for state. */
  --wr-cat-indigo:       #6366f1;
  --wr-cat-pink:         #ec4899;
  --wr-cat-amber:        #f59e0b;
  --wr-cat-purple:       #8b5cf6;
  --wr-cat-teal:         #14b8a6;
  --wr-cat-green:        #22c55e;
  --wr-cat-red:          #ef4444;
  --wr-cat-gray:         #9ca3af;

  /* Glass — translucent overlays for hover states + soft borders */
  --wr-glass-bg:         rgba(14, 42, 48, 0.025);
  --wr-glass-bg-hover:   rgba(14, 42, 48, 0.05);
  --wr-glass-border:     rgba(14, 42, 48, 0.10);
  --wr-glass-border-hov: rgba(14, 42, 48, 0.16);

  /* Semantic — error / info / warn / ok. Warn is derived warmer-amber
     to stay in palette; ok is muted reef-green. */
  --wr-error:            #D6453C;
  --wr-info:             #0F8A86;
  --wr-warn:             #C8841F;
  --wr-ok:               #14A06B;

  /* Typography — Space Grotesk for display, Inter for body. Local fallback to
     system stack so the platform looks correct even when web fonts haven't
     loaded (or can't load behind a corporate proxy). */
  --wr-font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wr-font-display:     'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --wr-font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --wr-max-width:        1180px;
  --wr-nav-w:            232px;

  /* ----- Design scale (spacing / radius / type / elevation / motion) --
     The component library (components.css) and every panel render_*()
     helper reference this scale by name with NO fallback, so it MUST be
     defined here or those properties silently collapse to browser
     defaults. Calibrated to the dense-but-legible bar (Datadog / Linear /
     Stripe): a 13px body, a tight type ramp, and a 4px spacing grid.

     History: the 2026-05-21 "token migration" pass (5b9fa7702) rewrote
     inline styles into these var() references but never shipped the
     definitions — 757 references resolved to nothing until this block.
     Don't remove a token here without removing its references first;
     `tests/test_css_tokens_defined.py` pins the referenced⊆defined
     contract so the gap can't silently reopen. */

  /* Spacing — 4px grid. space-1=4 … space-16=64. */
  --wr-space-1:          4px;
  --wr-space-2:          8px;
  --wr-space-3:          12px;
  --wr-space-4:          16px;
  --wr-space-5:          20px;
  --wr-space-6:          24px;
  --wr-space-8:          32px;
  --wr-space-12:         48px;
  --wr-space-16:         64px;

  /* Radius — soft by default; full for pills/dots. */
  --wr-radius-sm:        4px;
  --wr-radius-md:        9px;
  --wr-radius-lg:        13px;
  --wr-radius-xl:        17px;
  --wr-radius-full:      999px;

  /* Type ramp — 13px base (dense operator UI). Tabular contexts size
     up from here via the explicit px values in components.css. */
  --wr-text-2xs:         10.5px;
  --wr-text-xs:          11.5px;
  --wr-text-sm:          12.5px;
  --wr-text-base:        13px;
  --wr-text-lg:          15px;
  --wr-text-xl:          18px;
  --wr-text-2xl:         22px;

  /* Display ramp — the DRAMATIC hierarchy steps the Gotham-craft hero needs.
     A dashboard reads flat because everything sits in the 13–22px band; a
     true hero moment needs a genuinely large focal size with a clear drop to
     the supporting tier. ``--wr-display`` is the hero verdict/number;
     ``--wr-display-lg`` the bigger single-metric cockpit hero;
     ``--wr-text-3xl`` bridges to the section-lead tier. Rem-based so they
     scale with the user's root size (the dense px ramp above is intentional
     for tabular density; display type is the deliberate exception). */
  --wr-text-3xl:         28px;
  --wr-display:          40px;
  --wr-display-lg:       56px;
  /* Heavier weight than --wr-weight-semibold for the one hero numeral, so the
     focal point carries real visual mass against the supporting rhythm. */
  --wr-weight-bold:      720;

  /* Font weights — only the two non-default steps the UI actually uses. */
  --wr-weight-medium:    540;
  --wr-weight-semibold:  640;

  /* Letter-spacing (tracking) — the small-caps eyebrow/label treatment
     used across KPI labels, section headers, table column heads, and meta
     eyebrows. One canonical "wide" step so every uppercase micro-label
     tracks identically instead of drifting between 0.04 / 0.05 / 0.06em. */
  --wr-tracking-wide:    0.05em;

  /* Line-heights — tight for headings/KPIs, relaxed for prose. */
  --wr-leading-tight:    1.2;
  --wr-leading-snug:     1.35;
  --wr-leading-normal:   1.45;
  --wr-leading-relaxed:  1.6;

  /* Elevation — soft, low-spread, warm-tinted shadows (minimal depth). */
  --wr-shadow-sm:        0 1px 2px rgba(14, 42, 48, 0.05);
  --wr-shadow-md:        0 2px 8px rgba(14, 42, 48, 0.07), 0 1px 2px rgba(14, 42, 48, 0.05);
  --wr-shadow-lg:        0 10px 28px rgba(14, 42, 48, 0.10), 0 2px 8px rgba(14, 42, 48, 0.06);

  /* Motion — fast for hovers/swaps, normal for entrances. */
  --wr-duration-fast:    120ms;
  --wr-duration-base:    160ms;
  --wr-duration-normal:  200ms;
  --wr-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index — fallbacks in workspace.css mirror these (overlay 50,
     toast 90, tooltip 100); defining them here makes the fallbacks moot. */
  --wr-z-overlay:        50;
  --wr-z-toast:          90;
  --wr-z-tooltip:        100;

  /* Semantic surface/state tokens referenced by components.css + panels
     that have no canonical definition above. */
  --wr-success:          var(--wr-ok);              /* alias: ok by another name */
  --wr-glass-bg-strong:  rgba(14, 42, 48, 0.07);    /* heavier hover wash */
  --wr-input-bg:         var(--wr-surface);         /* form-field surface */
  --wr-subtle-bg:        var(--wr-bg-secondary);    /* low-emphasis row bg */
  --wr-primary-1-fade:   rgba(15, 138, 134, 0.10);  /* primary tint wash */

  /* Type swatches — left-rail accent on the finding card. Tuned to
     work on the WorkReef cream-paper background. Names match
     FINDING_TYPES in tenant/spine/models.py. */

  --wr-type-anomaly:     #B45309;  /* amber — "something off vs baseline" */
  --wr-type-risk:        var(--wr-error);
  --wr-type-opportunity: var(--wr-ok);
  --wr-type-milestone:   #4D7C0F;  /* leaf green — positive event */
  --wr-type-compliance:  var(--wr-node-violet);
  --wr-type-spend:       var(--wr-warm);

  /* Severity chips — finding-card chip row. Background + foreground
     pairs sized for a small pill in the chip row. Names match
     FINDING_SEVERITIES in tenant/spine/models.py. */

  --wr-sev-critical-bg:  rgba(220,38,38,0.10);
  --wr-sev-critical-fg:  var(--wr-error);
  --wr-sev-high-bg:      rgba(199,122,42,0.12);
  --wr-sev-high-fg:      var(--wr-warn);
  --wr-sev-medium-bg:    var(--wr-glass-bg);
  --wr-sev-medium-fg:    var(--wr-text-muted);
  --wr-sev-low-bg:       var(--wr-glass-bg);
  --wr-sev-low-fg:       var(--wr-text-subtle);

  /* ----- Workspace chip palette ------------------------------------
     The canonical bg/fg pairs every panel render function uses for
     small inline chips (status pills, AI-offload verdicts, sweep run
     chips, lake snapshot chips, persona badges). Mirrors the in-code
     palette in tenant/agents/workspace/_components.py::_CHIP_PALETTE
     so any chip can be re-skinned by editing one place. */

  --wr-chip-neutral-bg:  #f3f3f3;
  --wr-chip-neutral-fg:  #444;
  --wr-chip-success-bg:  #e8f5e9;
  --wr-chip-success-fg:  #2e7d32;
  --wr-chip-warning-bg:  #fff3e0;
  --wr-chip-warning-fg:  #e65100;
  --wr-chip-error-bg:    #fdecea;
  --wr-chip-error-fg:    #d33b3b;
  --wr-chip-info-bg:     #e8f0fe;
  --wr-chip-info-fg:     #1a4b8c;
  --wr-chip-accent-bg:   #fef7e0;
  --wr-chip-accent-fg:   #a06800;
  --wr-chip-muted-bg:    #fafafa;
  --wr-chip-muted-fg:    #616161;

  /* Agreement chips — the offload aggregated view "panel + items
     aligned / partial / divergent" trio. Distinct from the chip
     palette above because the foreground tone is intentionally deeper
     (the chip carries judgement, not just a count). */

  --wr-chip-aligned-bg:    #d4edda;
  --wr-chip-aligned-fg:    #155724;
  --wr-chip-partial-bg:    #fff3cd;
  --wr-chip-partial-fg:    #856404;
  --wr-chip-divergent-bg:  #f8d7da;
  --wr-chip-divergent-fg:  #721c24;

  /* Status dots — used in the agent strip + the integration health
     rows. Named by their semantic meaning so the dot's color reflects
     the connector's lifecycle. ``alerting`` carries the wr-pulse
     animation in workspace.html. */

  --wr-dot-watching:    #4caf50;
  --wr-dot-alerting:    #d33b3b;
  --wr-dot-awaiting:    #d49b1b;
  --wr-dot-idle:        #9aa3a8;
  --wr-dot-syncing:     #1e88e5;
  --wr-dot-stale:       #e65100;

  /* Distribution-bar fills — the feed AI-offload distribution
     uses a stacked horizontal bar to show fully_ai vs hybrid vs
     human_only proportions. The colors here are tuned for legibility
     against the panel's glass-bg background. */

  --wr-bar-fully-ai:    #28a745;
  --wr-bar-hybrid:      #ffc107;
  --wr-bar-human-only:  #dc3545;

  /* Standard padding for every <td> inside a panel-rendered table. */
  --wr-table-row-padding: 7px 10px;

  /* ----- Semantic interaction tokens ---------------------------------
     Reusable across all stylesheets so raw rgba values stay out of
     component CSS. Dark-mode overrides live in the .dark block below. */

  --wr-focus-ring:       rgba(15, 138, 134, 0.26);
  --wr-scrim:            rgba(8, 22, 26, 0.42);
  --wr-btn-hover:        #0C726F;
  --wr-error-bg:         rgba(214, 69, 60, 0.08);
  --wr-error-border:     rgba(214, 69, 60, 0.22);
  --wr-success-bg:       rgba(20, 160, 107, 0.10);
  --wr-success-border:   rgba(20, 160, 107, 0.24);
  --wr-warning-bg:       rgba(200, 132, 31, 0.10);
  --wr-warning-border:   rgba(200, 132, 31, 0.24);
  --wr-info-bg:          rgba(15, 138, 134, 0.08);
  --wr-info-border:      rgba(15, 138, 134, 0.20);

  /* ----- Module identity — Discover / Transform / Govern -------------
     The product has exactly three modules. Each carries a SUBTLE
     signature accent so an operator always knows which surface they're
     on without reading the title. The accent is a tinted relative of
     the deep-navy brand — never a loud second hue — so the system reads
     as one confident product, not three themes bolted together.

       Discover  — reef teal: the "explore / understand" surface.
       Transform — kelp brass: the "build / propose" surface.
       Govern    — sentinel indigo: the "oversee / approve" surface.

     ``--wr-module-accent`` is the live slot the app shell rebinds per
     module (``[data-module="discover"]`` etc.) so any component inside a
     module surface — a focused tab, an active sidebar item, a primary
     button rail — can reference one variable and follow the module.
     Components MUST reference ``--wr-module-accent`` (not the per-module
     literals) so they re-tint automatically. */

  --wr-discover:         #0F8A86;   /* reef teal */
  --wr-discover-soft:    rgba(15, 138, 134, 0.12);
  --wr-transform:        #C8841F;   /* kelp gold */
  --wr-transform-soft:   rgba(200, 132, 31, 0.12);
  --wr-govern:           #2D5F8A;   /* deep-ocean sentinel */
  --wr-govern-soft:      rgba(45, 95, 138, 0.12);

  /* Live module-accent slot — defaults to the brand navy (Focus/Home,
     Admin, and any surface that doesn't declare a module). Rebound by
     ``[data-module="…"]`` in workspace.css. */
  --wr-module-accent:        var(--wr-primary-1);
  --wr-module-accent-soft:   var(--wr-primary-1-fade);
  --wr-module-accent-strong: var(--wr-primary-2);

  /* ----- Quorum voices — the three frontier voices, fixed brand tokens --
     Claude / GPT-5 / Gemini each own a fixed colour wherever a quorum is
     plotted, so a reader learns the voice once and reads dissent at a
     glance. The foundation quorum component references these, never a
     literal. Light values are deepened from the dark register so a voice
     swatch and its label hold AA contrast on white paper. */
  --wr-vote-claude:      #B06A33;
  --wr-vote-gpt:         #157A68;
  --wr-vote-gemini:      #3A63CC;

  /* ----- Severity scale — the redesign primitive vocabulary -----------
     The UNIT-1 primitives (tenant/agents/workspace/_primitives.py +
     primitives.css) encode status on ONE pre-attentive colour channel
     (COGNITION §1.3) via a five-step severity scale. Aliased to the
     canonical semantic tokens so one edit re-tints every primitive
     (fleet_shape segment, needs_attention dot, command_bar posture,
     dimension_posture bar). ``ok``/``info``/``notice`` recede;
     ``warning``/``critical`` pop. Distinct from the ``--wr-sev-*-bg/-fg``
     finding-chip pairs above (those are chip backgrounds; these are the
     foreground/fill hues). */
  --wr-sev-ok:               var(--wr-ok);
  --wr-sev-info:             var(--wr-info);
  --wr-sev-notice:           var(--wr-text-subtle);
  --wr-sev-warning:          var(--wr-warn);
  --wr-sev-critical:         var(--wr-error);

  /* ----- Content rhythm ---------------------------------------------
     A handful of layout constants the shell + page container reference
     so the dense-but-calm rhythm stays consistent everywhere. */
  --wr-shell-topbar-h:   48px;
  --wr-shell-sidebar-w:  232px;
  --wr-shell-sidebar-collapsed-w: 56px;
  --wr-shell-rail-w:     420px;
  --wr-content-max:      1280px;

  /* Inner divider — one shade lighter than the glass border, for
     hairlines inside cards where the standard border is too heavy. */
  --wr-hairline:         rgba(0, 0, 0, 0.05);

  /* Per-instance grid-track slots — components.css reads these for the
     stat-tile + detail-grid column counts; the render helper overrides
     them inline per call (``style="--wr-stat-cols: 3"``). Defined here so
     the referenced⊆defined token contract holds and a missing inline
     override falls back to the sensible default rather than collapsing. */
  --wr-stat-cols:        4;
  --wr-detail-cols:      2;
  /* Chart-primitive per-instance vars (_charts.py sets them inline:
     ``style="--wr-donut-size: 168px"`` / ``--wr-tl-cols: <n>``). Defaults here so
     the referenced⊆defined token contract holds + a missing override degrades. */
  --wr-donut-size:       168px;
  --wr-tl-cols:          24;

  /* Agent Vector Brain heatmap (panels_brain.py) — the per-cell tint color
     + intensity the panel stamps INLINE per cell (``style="--wr-cell-c: …;
     --wr-cell-i: 0.42"``). Defined here with safe defaults so the
     referenced⊆defined token contract holds and a cell with no inline
     override renders as an empty (intensity-0) cell rather than collapsing
     to a browser default. */
  --wr-cell-c:           var(--wr-module-accent);
  --wr-cell-i:           0;

  /* ----- Active semantic aliases — referenced by app/shared CSS + panels.
     Do not remove until every reference is migrated to the canonical name. */
  --wr-border:           var(--wr-glass-border);
  --wr-border-2:         var(--wr-glass-border-hov);
  --wr-surface-2:        var(--wr-bg-secondary);
  --wr-accent:           var(--wr-ocean);
  --wr-accent-soft:      var(--wr-primary-1-fade);
  --wr-danger:           var(--wr-error);
}

/* ----- The dark register — reef-dark, the alternative mode ---------
   The whole system reads its surfaces, ink, glass, and chip palette
   from --wr-* tokens — never hard-coded hex. That makes the register a
   pure token remap: flip ``color-scheme`` and rebind the surface/ink/
   glass families. ``data-theme="dark"`` is stamped on <html> by the
   theme bootstrap (shared/static/js/theme.js) when the operator
   explicitly switches to dark mode; nothing else in the codebase changes.

   Same composition as reef-light; only the palette flips: deep-ocean
   navy surfaces, reef-teal interactive accent, warm-white ink ramp. */

[data-theme="dark"] {
  color-scheme: dark;

  /* REEF-DEEP NIGHT (2026-06-11). The canon register (docs/mockups/canon.css)
     bound onto the --wr-* names — the reef-deep navy canvas the mockups are
     designed against, NOT a neutral charcoal. The surfaces are lifted straight
     from the marketing hero2 gradient stops: a navy canvas climbing in
     lightness so a card reads as a card, warm-white ink fading to whisper,
     azure as the single interactive accent, mint for live/healthy. Every hex
     here is a canon token (the trailing note names the canon source). DARK is
     the product's default register; light survives only as the paper drill-
     through below. This is the SAME composition as light; only the palette flips. */

  /* Surfaces — canon --abyss/--deep/--night → bg ramp; --surface/-2/-3 → the
     card → raised → inset well. The canvas climbs navy, never flat black. */
  --wr-bg:               #0B1126;   /* canon --abyss   page base / gradient floor */
  --wr-bg-secondary:     #0E1430;   /* canon --deep    recessed band */
  --wr-bg-tertiary:      #101933;   /* canon --night   panel field */
  --wr-surface:          #141C3A;   /* canon --surface a card on the night */
  /* Elevation climbs: the raised hero panel sits ABOVE the card (lighter), the
     inset well BELOW it (darker) — so a layered composition reads as depth. */
  --wr-surface-raised:   #1A2347;   /* canon --surface-2 raised card / hover */
  --wr-surface-inset:    #101933;   /* canon --night     inset well, header strip */

  /* Ink — canon --ink ramp: warm-white headline fading to whisper on the night. */
  --wr-text:             #E7ECF6;   /* canon --ink   headline */
  --wr-text-muted:       #B9C4DA;   /* canon --ink-2 body / muted */
  --wr-text-subtle:      #9FB0CC;   /* canon --ink-3 subtle */
  --wr-text-whisper:     #6E7DA0;   /* canon --ink-4 whisper */

  /* Brand — reef-teal on dark: bright enough to hold contrast on the navy
     surfaces while keeping the reef identity consistent across modes. */
  --wr-primary-1:        #3FC5BA;   /* teal interactive accent on navy */
  --wr-primary-2:        #6ECFCA;   /* teal-bright, hover / bright link */
  --wr-primary-3:        #0F8A86;   /* deep reef-teal */
  --wr-primary-1-fade:   rgba(63, 197, 186, 0.16);
  --wr-coral:            #F2613F;   /* coral reads cleanly on the navy canvas */
  --wr-ocean:            #3FC5BA;   /* teal, the on-dark interactive accent */

  /* Semantic state — bright enough to read on the navy at a glance. */
  --wr-error:            #F2545B;
  --wr-warn:             #E0A23C;
  --wr-ok:               #3FB87E;
  --wr-info:             #3FC5BA;   /* reef-teal info, consistent across modes */

  /* Glass + hairlines — canon's white-veil overlays on the navy. */
  --wr-glass-bg:         rgba(255, 255, 255, 0.05);    /* canon glimpse fill */
  --wr-glass-bg-hover:   rgba(255, 255, 255, 0.08);
  --wr-glass-bg-strong:  rgba(255, 255, 255, 0.11);
  --wr-glass-border:     rgba(255, 255, 255, 0.08);    /* canon --hairline */
  --wr-glass-border-hov: rgba(255, 255, 255, 0.14);    /* canon --hairline-2 */
  --wr-hairline:         rgba(255, 255, 255, 0.08);    /* canon --hairline */

  /* Module accents — canon --discover/--transform/--govern (reef teal / kelp
     brass / sentinel indigo): subtle tinted relatives of the navy. */
  --wr-discover:         #3FB6C2;   /* canon --discover */
  --wr-discover-soft:    rgba(63, 182, 194, 0.16);
  --wr-transform:        #C7A45A;   /* canon --transform */
  --wr-transform-soft:   rgba(199, 164, 90, 0.16);
  --wr-govern:           #8A8EE0;   /* canon --govern */
  --wr-govern-soft:      rgba(138, 142, 224, 0.16);

  /* Module accent slot — teal-bright so the eyebrow tick + active rail
     read on the navy with reef identity. */
  --wr-module-accent-strong: #6ECFCA;   /* teal-bright */

  /* Quorum voices — canon --vote-claude/--vote-gpt/--vote-gemini, the three
     frontier voices learned once and read at a glance wherever a quorum plots. */
  --wr-vote-claude:      #C9824A;   /* canon --vote-claude */
  --wr-vote-gpt:         #1A9E86;   /* canon --vote-gpt */
  --wr-vote-gemini:      #4C7DF0;   /* canon --vote-gemini */

  /* State washes — re-tinted for the dark canvas (the light rgba values are
     near-invisible on charcoal). */
  --wr-error-bg:         rgba(242, 84, 91, 0.14);
  --wr-error-border:     rgba(242, 84, 91, 0.34);
  --wr-success-bg:       rgba(63, 184, 126, 0.14);
  --wr-success-border:   rgba(63, 184, 126, 0.30);
  --wr-warning-bg:       rgba(224, 162, 60, 0.14);
  --wr-warning-border:   rgba(224, 162, 60, 0.32);
  --wr-info-bg:          rgba(63, 197, 186, 0.14);
  --wr-info-border:      rgba(63, 197, 186, 0.30);

  /* Shadows go deeper + an inset hairline-light on raised surfaces reads as a
     crisp edge on the dark canvas (the Gotham "lit edge"). */
  --wr-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.55);
  --wr-shadow-md:        0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.50);
  --wr-shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.50);

  /* Chip palette — the light chip hexes (pale pastels) wash out on charcoal.
     Remap to translucent state-tints with bright ink so chips stay legible. */
  --wr-chip-neutral-bg:  rgba(255, 255, 255, 0.06);
  --wr-chip-neutral-fg:  #B9C4DA;                  /* canon --ink-2 */
  --wr-chip-success-bg:  rgba(63, 184, 126, 0.16);
  --wr-chip-success-fg:  #6FD6B0;                  /* canon --mint-bright */
  --wr-chip-warning-bg:  rgba(224, 162, 60, 0.16);
  --wr-chip-warning-fg:  #E0A23C;                  /* canon --warn */
  --wr-chip-error-bg:    rgba(242, 84, 91, 0.16);
  --wr-chip-error-fg:    #F2545B;                  /* canon --bad */
  --wr-chip-info-bg:     rgba(63, 197, 186, 0.16);
  --wr-chip-info-fg:     #6ECFCA;                  /* reef-teal */
  --wr-chip-accent-bg:   rgba(199, 164, 90, 0.16);
  --wr-chip-accent-fg:   #C7A45A;                  /* canon --transform */
  --wr-chip-muted-bg:    rgba(255, 255, 255, 0.05);
  --wr-chip-muted-fg:    #9FB0CC;                  /* canon --ink-3 */

  /* Active-press + focus surfaces tuned for the reef-deep paper. */
  --wr-btn-hover:        #E6E8EC;
  --wr-focus-ring:       rgba(63, 197, 186, 0.40);  /* reef-teal */
  --wr-scrim:            rgba(8, 12, 22, 0.62);      /* canon --scrim */

  /* PAPER — the recessed drill-through (canon --paper / --ink-paper). The ONE
     place light survives in the dark register: when a surface deliberately
     drops OUT of the navy to present raw rows or a document, it lands on warm
     paper with near-black ink. A .wr-paper scope (foundation.css) rebinds the
     surface + ink families to these so a recessed <details> reads as a sheet
     pulled from the dark canvas, exactly like canon's .glimpse paper. */
  --wr-paper-bg:         #F6F6F4;   /* canon --paper   */
  --wr-paper-surface:    #FFFFFF;   /* canon --paper-2 */
  --wr-paper-inset:      #EFEFEC;   /* canon --paper-3 */
  --wr-ink-paper:        #14161C;   /* canon --ink-paper, near-black on paper */
}


/* ----- Global focus management (WCAG 2.1 AA) -----------------------
   Matches the marketing site's focus-visible pattern: keyboard users
   see a clear ring; mouse/touch users see nothing.                    */

:focus-visible {
  outline: 2px solid var(--wr-ocean);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled buttons + pagination "no more" placeholders. */
button:disabled,
.is-disabled,
.pagination-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Active press state — subtle scale-down for tactile feedback. */
button:active:not(:disabled),
a:active {
  transform: scale(0.98);
}

/* Panel-card head sticks to the top of the canvas when the body is
   taller than the viewport — preserves the title + meta as the operator
   scrolls a long detail view. */
.panel-card .panel-card-head {
  position: sticky;
  top: 0;
  background: var(--wr-bg);
  z-index: 2;
  padding-top: 4px;
}

/* HTMX loading indicator — only shows after a request runs for 200ms+
   so fast panel swaps don't flash a "Loading…" line. Pairs with the
   default ``.panel-loading`` class on the placeholder div. */
.panel-loading {
  opacity: 0;
  transition: opacity 200ms ease 200ms;
}
.htmx-request .panel-loading,
.htmx-request.panel-loading {
  opacity: 1;
}

/* ----- Skip link (accessibility) ------------------------------------
   Shared across workspace, platform, and login shells. Hidden off-
   screen by default, slides into view on Tab focus so keyboard users
   can jump straight to the main content. */

.wr-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: var(--wr-z-tooltip, 100);
  padding: 8px 16px;
  background: var(--wr-primary-1);
  color: var(--wr-surface);
  border-radius: var(--wr-radius-md);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}
.wr-skip-link:focus {
  top: 8px;
}