/* ---------------------------------------------------------------------
   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.

   New code should reference --wr-* names. Legacy aliases below preserve
   the Leopon-era variable names so existing templates continue to render
   without a sweeping refactor; the aliases will be removed once every
   `var(--tiger)` / `var(--cream)` etc. reference has been migrated.

   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 (canonical) -------------------------------- */
  /*
   * AUTHORITATIVE-LIGHT (2026-06-02 Gotham-craft rebuild). The prior cream
   * palette read as a "friendly admin tool"; this is the same warm-paper
   * lineage pushed to an authoritative register: a crisper, faintly-cool
   * near-white canvas, true-white elevated surfaces that *separate* from the
   * canvas (a card reads as a card, not a tint), and a near-black ink with a
   * stronger contrast ramp so the hero type lands with weight. The
   * COMPOSITION (hero / hierarchy / graph / sparklines) is identical in dark
   * mode; only these surface/ink hexes differ. Edit a hex here → both move.
   */

  /* Surfaces — bright paper canvas → recessed → tertiary → elevated true
     white. The canvas is a hair cooler + brighter than the old cream so a
     true-white card lifts off it cleanly (the Stripe/Gotham "surface
     separates" read), not a wash that blends into a flat wall of tiles. */
  --wr-bg:               #F6F6F4;
  --wr-bg-secondary:     #EFEFEC;
  --wr-bg-tertiary:      #E5E4E0;
  --wr-surface:          #FFFFFF;
  /* Two elevation tiers ABOVE the base surface for layered composition (the
     hero panel, an inset viz well). Light: a faint lift / a recessed well;
     dark: progressively lighter charcoals. Referenced by the new hero /
     graph / sparkline primitives so depth is a token, never a per-panel hack. */
  --wr-surface-raised:   #FFFFFF;
  --wr-surface-inset:    #F3F3F0;

  /* Ink — near-black graphite fading to whisper. A stronger top-of-ramp
     contrast than the old sepia so display type reads authoritative, not soft. */
  --wr-text:             #14161B;
  --wr-text-muted:       #474C56;
  --wr-text-subtle:      #767B85;
  --wr-text-whisper:     #A6AAB2;

  /* Brand — deep navy gradient ("reef deep"); primary-2 is a single-hex
     stand-in where gradients are awkward (e.g. text color) */
  --wr-primary-1:        #1A2B5E;
  --wr-primary-2:        #1B3A65;
  --wr-primary-3:        #122D4F;
  --wr-primary-gradient: linear-gradient(135deg, var(--wr-primary-1) 0%, var(--wr-primary-2) 50%, var(--wr-primary-3) 100%);

  /* Accent gradient — slightly lighter ocean. Used on hover states + CTAs. */
  --wr-accent-1:         #2A3B7E;
  --wr-accent-2:         #1E4A78;
  --wr-accent-gradient:  linear-gradient(135deg, var(--wr-accent-1) 0%, var(--wr-accent-2) 100%);

  /* Warm complement — kelp / brass, used as the secondary accent */
  --wr-warm:             #7A6238;
  --wr-warm-soft:        rgba(122,98,56,0.10);

  /* Ocean — single-color interactive accent (links, info chips, focus rings).
     Deepened from the soft #3A6FA0 to a crisper authoritative ocean so links
     + accents carry conviction on the bright canvas. */
  --wr-ocean:            #2D6299;

  /* 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(0,0,0,0.02);
  --wr-glass-bg-hover:   rgba(0,0,0,0.04);
  --wr-glass-border:     rgba(0,0,0,0.08);
  --wr-glass-border-hov: rgba(0,0,0,0.14);

  /* Semantic — error / info / warn / ok. Warn is derived warmer-amber
     to stay in palette; ok is muted reef-green. */
  --wr-error:            #DC2626;
  --wr-info:             #2563EB;
  --wr-warn:             #C77A2A;
  --wr-ok:               #2E7E5E;

  /* Typography — Outfit 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:     'Outfit', '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 — subtle by default; full for pills/dots. */
  --wr-radius-sm:        4px;
  --wr-radius-md:        6px;
  --wr-radius-lg:        10px;
  --wr-radius-xl:        14px;
  --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-normal:   1.45;
  --wr-leading-relaxed:  1.6;

  /* Elevation — soft, low-spread shadows tuned for the cream surface.
     Stripe/Linear lean on barely-there elevation, not drop shadows. */
  --wr-shadow-sm:        0 1px 2px rgba(16, 22, 38, 0.05);
  --wr-shadow-md:        0 2px 6px rgba(16, 22, 38, 0.07), 0 1px 2px rgba(16, 22, 38, 0.05);
  --wr-shadow-lg:        0 8px 24px rgba(16, 22, 38, 0.10), 0 2px 6px rgba(16, 22, 38, 0.06);

  /* Motion — fast for hovers/swaps, normal for entrances. */
  --wr-duration-fast:    120ms;
  --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(0, 0, 0, 0.06);       /* 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(26, 43, 94, 0.08);    /* primary tint wash */

  /* ----- Legacy aliases ---------------------------------------------
     Maps the Leopon-era variable names to their WorkReef equivalents.
     Every template references these via `var(--cream)`, `var(--tiger)`,
     etc.; rebinding them here flips the visual to the WorkReef palette
     without touching the templates. Each alias has a one-line note on
     why this is the right mapping. Remove this block once every
     reference has been migrated to `--wr-*`. */

  --cream:               var(--wr-bg);                /* background paper */
  --cream-2:             var(--wr-bg-secondary);      /* secondary surface (hover, panels) */
  --paper:               var(--wr-surface);           /* elevated surface (cards, nav) */

  --ink:                 var(--wr-text);              /* primary text */
  --ink-2:               var(--wr-text-muted);        /* secondary text */
  --muted:               var(--wr-text-subtle);       /* tertiary text */

  /* The "tiger" stack was Leopon's primary interactive color (orange).
     Maps to the WorkReef ocean: a single-hex stand-in for the navy
     gradient that works wherever a gradient doesn't (text, borders,
     thin strokes). --tiger-dark goes one step deeper for hover. */
  --tiger:               var(--wr-ocean);
  --tiger-dark:          var(--wr-primary-2);
  --tiger-soft:          rgba(58,111,160,0.18);       /* light wash of ocean */

  /* Rules / dividers — light cream lines */
  --rule:                var(--wr-glass-border);
  --rule-2:              var(--wr-glass-border-hov);

  --danger:              var(--wr-error);
  --good:                var(--wr-ok);

  /* ----- Findings primitive aliases ---------------------------------
     The finding card partial (app/templates/_finding_card.html) was
     built against semantic names that don't have direct equivalents
     above. Map them here as aliases of the canonical --wr-* tokens
     so the partial works without modification. */

  --wr-paper:            var(--wr-surface);
  --wr-cream:            var(--wr-bg);
  --wr-cream-2:          var(--wr-bg-secondary);
  --wr-rule:             var(--wr-glass-border);
  --wr-rule-2:           var(--wr-glass-border-hov);
  --wr-ink:              var(--wr-text);
  --wr-ink-2:            var(--wr-text-muted);
  --wr-muted:            var(--wr-text-subtle);
  --wr-accent:           var(--wr-ocean);
  --wr-accent-strong:    var(--wr-primary-2);
  --wr-accent-soft:      rgba(58,111,160,0.18);
  --wr-good:             var(--wr-ok);
  --wr-danger:           var(--wr-error);

  /* Discover-view template aliases — discover_workforce/customers/feeds/
     contacts.html reference these names directly (no fallback). Bind them
     here so search boxes + pagination + chips render correctly. */
  --wr-tiger:            var(--wr-ocean);              /* primary interactive */
  --wr-tiger-dark:       var(--wr-primary-2);          /* hover state */
  --wr-tiger-light:      rgba(58,111,160,0.28);        /* soft border */
  --wr-amber:            var(--wr-warn);               /* secondary accent (vendor chip etc.) */
  --wr-border:           var(--wr-glass-border);
  --wr-border-2:         var(--wr-glass-border-hov);
  --wr-surface-2:        var(--wr-bg-secondary);

  /* Type swatches — left-rail accent on the finding card. Tuned to
     work on the WorkReef cream-paper background. Names match
     FINDING_TYPES in app/tenant/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 app/tenant/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 app/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(58, 111, 160, 0.24);
  --wr-scrim:            rgba(8, 12, 22, 0.36);
  --wr-btn-hover:        #2A2520;
  --wr-error-bg:         rgba(220, 38, 38, 0.08);
  --wr-error-border:     rgba(220, 38, 38, 0.20);
  --wr-success-bg:       rgba(46, 126, 94, 0.08);
  --wr-success-border:   rgba(46, 126, 94, 0.18);
  --wr-warning-bg:       rgba(122, 98, 56, 0.10);
  --wr-warning-border:   rgba(122, 98, 56, 0.22);
  --wr-info-bg:          rgba(37, 99, 235, 0.07);
  --wr-info-border:      rgba(37, 99, 235, 0.18);

  /* ----- 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:         #1E7C86;   /* reef teal */
  --wr-discover-soft:    rgba(30, 124, 134, 0.12);
  --wr-transform:        #8A6A2F;   /* kelp brass */
  --wr-transform-soft:   rgba(138, 106, 47, 0.12);
  --wr-govern:           #4B4FA6;   /* sentinel indigo */
  --wr-govern-soft:      rgba(75, 79, 166, 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);

  /* ----- Severity scale — the redesign primitive vocabulary -----------
     The UNIT-1 primitives (app/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;

  /* 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;
}

/* ----- Dark-mode-ready token structure -----------------------------
   The whole system reads its surfaces, ink, glass, and chip palette
   from --wr-* tokens — never hard-coded hex. That makes a dark theme a
   pure token remap: flip ``color-scheme`` and rebind the surface/ink/
   glass families. Opt in by adding ``data-theme="dark"`` to <html>;
   nothing else in the codebase changes. The brand navy + module accents
   are nudged brighter so they hold contrast on the dark paper.

   This block is deliberately scoped (not :root) so light stays the
   default — the dark surface is real and wired, ready to flip on when
   the operator preference lands, without a second design pass. */

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

  /* DARK GOTHAM (2026-06-02). A complete, cohesive remap — deep blue-charcoal
     canvas (not pure black — black crushes the elevation read), layered
     surfaces that climb in lightness so depth is legible, high-contrast warm-
     white ink, and accents nudged brighter/more saturated so they hold on the
     dark paper. This is the SAME composition as light; only the palette flips. */
  --wr-bg:               #0E1014;
  --wr-bg-secondary:     #15181F;
  --wr-bg-tertiary:      #1E222B;
  --wr-surface:          #161A21;
  /* Elevation climbs: inset well sits BELOW the surface (darker), raised hero
     panel sits ABOVE it (lighter) — so a layered composition reads as depth. */
  --wr-surface-raised:   #1C212A;
  --wr-surface-inset:    #11141A;

  --wr-text:             #ECEEF2;
  --wr-text-muted:       #AEB4BF;
  --wr-text-subtle:      #7E8590;
  --wr-text-whisper:     #565C66;

  --wr-primary-1:        #6E86D6;
  --wr-primary-2:        #8298E6;
  --wr-primary-3:        #5A72C2;
  --wr-primary-1-fade:   rgba(110, 134, 214, 0.18);
  --wr-ocean:            #74AEE4;

  /* Semantic state — brighter on dark so a red/amber/green reads at a glance
     without glowing. The light palette's deep tones would muddy on charcoal. */
  --wr-error:            #F2545B;
  --wr-warn:             #E0A23C;
  --wr-ok:               #3FB87E;
  --wr-info:             #5B9BF5;

  --wr-glass-bg:         rgba(255, 255, 255, 0.035);
  --wr-glass-bg-hover:   rgba(255, 255, 255, 0.07);
  --wr-glass-bg-strong:  rgba(255, 255, 255, 0.10);
  --wr-glass-border:     rgba(255, 255, 255, 0.11);
  --wr-glass-border-hov: rgba(255, 255, 255, 0.20);
  --wr-hairline:         rgba(255, 255, 255, 0.07);

  --wr-discover:         #3FB6C2;
  --wr-discover-soft:    rgba(63, 182, 194, 0.16);
  --wr-transform:        #C7A45A;
  --wr-transform-soft:   rgba(199, 164, 90, 0.16);
  --wr-govern:           #8A8EE0;
  --wr-govern-soft:      rgba(138, 142, 224, 0.16);

  /* Module accent slot — defaults brighter so Home/Focus (brand navy) reads. */
  --wr-module-accent-strong: #8298E6;

  /* 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(91, 155, 245, 0.13);
  --wr-info-border:      rgba(91, 155, 245, 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.07);
  --wr-chip-neutral-fg:  #C4C9D2;
  --wr-chip-success-bg:  rgba(63, 184, 126, 0.16);
  --wr-chip-success-fg:  #5CD79C;
  --wr-chip-warning-bg:  rgba(224, 162, 60, 0.16);
  --wr-chip-warning-fg:  #ECB860;
  --wr-chip-error-bg:    rgba(242, 84, 91, 0.16);
  --wr-chip-error-fg:    #FF7A80;
  --wr-chip-info-bg:     rgba(91, 155, 245, 0.16);
  --wr-chip-info-fg:     #7FB2FF;
  --wr-chip-accent-bg:   rgba(199, 164, 90, 0.16);
  --wr-chip-accent-fg:   #D9BA72;
  --wr-chip-muted-bg:    rgba(255, 255, 255, 0.05);
  --wr-chip-muted-fg:    #9CA2AD;

  /* Active-press + focus surfaces tuned for dark. */
  --wr-btn-hover:        #E6E8EC;
  --wr-focus-ring:       rgba(116, 174, 228, 0.40);
  --wr-scrim:            rgba(0, 0, 0, 0.62);
}

/* ----- 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;
}