@charset "utf-8";
/*
 * ============================================================================
 * STRATAMIZE INVOICING — OPERATIONAL ORBIT SEMANTIC BRIDGE  (tokens.css)
 * ============================================================================
 * Load order: /brand/stratamize-tokens.css (the canonical Operational Orbit
 * token block, vendored VERBATIM from Stratamize/stratamize-brand @ ceba15b)
 * MUST be linked BEFORE this file. This bridge re-derives the invoicing
 * component contract — the semantic custom properties consumed by
 * elements / actions-forms / data / nav-shell / feedback-overlays /
 * surfaces-viz — from the canonical --stz-* roles, so every component
 * resolves to Operational Orbit in both themes without slice rewrites.
 *
 * ORBIT RULES ENFORCED HERE
 *   • ZERO raw color values in this file. Canonical values live ONLY in
 *     stratamize-tokens.css; everything below is var(--stz-*) + color-mix.
 *   • Signal Lime is the ONE primary action per region (--action family;
 *     consumed by .btn--primary only).
 *   • Route Cyan is the information layer: links, selected state, live and
 *     route signals (--accent family).
 *   • Coral is FOCUS ONLY (--ring) plus the rare interruption (--rare).
 *   • Light is the default; dark is a user preference. Theme-flipping
 *     canonical roles resolve automatically; the few bridge-level extras are
 *     mirrored under the same three-state conditions as the canonical sheet.
 *   • Radii ride the sanctioned 10 / 14 / 22 / 32 scale.
 *   • Type voices: Barlow Condensed display · Inter body · IBM Plex Mono
 *     utility (all identifiers + money).
 *
 * File map:
 *   §0  Font faces (the three Orbit voices)
 *   §A  Scales + Orbit role derivations (theme-agnostic / self-theming)
 *   §B  Dark-theme extras (explicit choice + OS preference)
 *   §D  Status wash/edge derivations
 *   §R  Role / scope layer ([data-role] third axis, unchanged contract)
 *   §S  Shell chrome scope — the ink foundation in BOTH themes
 *   §E  Reduced-motion + forced-colors guards
 *   §F  Tiny base reset + body wiring + the live-caret keyframe
 * ============================================================================
 */

/* ── §0 · FONT VOICES — Barlow Condensed · Inter · IBM Plex Mono ──────────── */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ════════════════════════════════════════════════════════════════════════
   §A · SCALES + ORBIT ROLE DERIVATIONS
        Everything referencing a theme-flipping --stz-* role self-themes.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ---- TYPE — three voices, strictly zoned (canonical Orbit stacks) ---- */
  --font-display: var(--stz-font-display);   /* mastheads / headlines / big money */
  --font-text:    var(--stz-font-body);      /* prose / UI / labels / nav / buttons */
  --font-mono:    var(--stz-font-utility);   /* ALL money + IDs + data */

  /* ---- FLUID TYPE SCALE — retained ramp; Orbit governs voice + leading ---- */
  --fs-kicker:  clamp(0.6875rem, 0.66rem + 0.10vw, 0.75rem);
  --fs-meta:    clamp(0.75rem,   0.72rem + 0.12vw, 0.8125rem);
  --fs-sm:      clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --fs-base:    clamp(0.9375rem, 0.90rem + 0.22vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem,  1.03rem + 0.45vw, 1.375rem);
  --fs-h4:      clamp(1.125rem,  1.02rem + 0.50vw, 1.375rem);
  --fs-h3:      clamp(1.375rem,  1.18rem + 0.90vw, 1.875rem);
  --fs-h2:      clamp(1.875rem,  1.50rem + 1.80vw, 3rem);
  --fs-h1:      clamp(2.75rem,   1.90rem + 4.20vw, 5.5rem);
  --fs-display: clamp(3.5rem,    2.00rem + 7.00vw, 8.5rem);
  --fs-num-s:   clamp(1.125rem,  1.02rem + 0.55vw, 1.375rem);
  --fs-num-m:   clamp(1.625rem,  1.35rem + 1.30vw, 2.25rem);
  --fs-num-l:   clamp(2.5rem,    1.90rem + 3.00vw, 4rem);

  --tracking-kicker: 0.22em;
  --tracking-caps:   0.10em;
  --tracking-tight:  -0.01em;   /* condensed display needs less negative tracking */
  --tracking-wordmark: 0.02em;  /* condensed wordmark breathes slightly open */
  --leading-display: var(--stz-leading-display);
  --leading-tight:   1.08;
  --leading-snug:    1.30;
  --leading-body:    var(--stz-leading-body);
  --measure:         68ch;

  /* ---- SPACE — 4px base rhythm (superset of the canonical 8-step scale) ---- */
  --s-px:1px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --space-section: clamp(4rem, 3rem + 6vw, 10rem);

  /* ---- LAYOUT ---- */
  --shell-h:     56px;
  --content-max: 1320px;        /* dense operator workbench; canonical wide is
                                   var(--stz-content-wide) — deviation recorded
                                   in docs/brand/brand-implementation-brief.md */
  --measure-max: 760px;
  --gutter:      clamp(20px, 1.2vw + 14px, 48px);
  --grid-gap:    clamp(16px, 1vw + 10px, 28px);
  --rail-w:      2px;

  /* ---- RADIUS — the sanctioned Orbit 10/14/22/32 scale (+ micro details) ---- */
  --r-0:0; --r-1:2px; --r-2:4px;
  --r-3:      var(--stz-radius-control);   /* 10px — buttons / inputs */
  --r-md:     var(--stz-radius-control);   /* 10px — fieldsets / controls */
  --r-lg:     var(--stz-radius-card);      /* 14px — cards */
  --r-xl:     var(--stz-radius-panel);     /* 22px — panels */
  --r-feature:var(--stz-radius-feature);   /* 32px — large narrative features */
  --r-full:999px;

  /* ---- MOTION — Orbit fast/standard/route, one entrance curve ---- */
  --dur-1:120ms;   /* state flips        — canonical fast */
  --dur-2:180ms;   /* controls           — canonical standard */
  --dur-3:280ms;   /* panels / overlays  — intermediate step */
  --dur-4:420ms;   /* route narratives   — canonical route */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-edit: cubic-bezier(0.2, 0.8, 0.2, 1);
  --blink: 1.05s;

  /* ---- Z-INDEX — single ordered stack (unchanged contract) ---- */
  --z-base:      0;
  --z-raised:    1;
  --z-sticky:    100;
  --z-nav:       200;
  --z-dropdown:  300;
  --z-drawer:    400;
  --z-overlay:   500;
  --z-modal:     510;
  --z-toast:     600;
  --z-tooltip:   700;
  --z-max:       9999;

  /* ---- BREAKPOINTS — reference values ---- */
  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ---- SURFACES + INK — canonical roles (self-theming) ---- */
  --surface-page:    var(--stz-surface-canvas);
  --surface-raised:  var(--stz-surface-panel);
  --surface-sunken:  var(--stz-mist-100);          /* light default; §B flips */
  --surface-header:  var(--stz-mist-100);          /* light default; §B flips */
  --surface-inverse: var(--stz-surface-shell);     /* light default; §B flips */
  --row-hover: color-mix(in oklab, var(--stz-action-secondary) 8%, transparent);

  --ink:        var(--stz-text);
  --ink-2:      color-mix(in oklab, var(--stz-text) 84%, var(--stz-surface-canvas));
  --ink-3:      var(--stz-text-muted);
  --ink-4:      var(--stz-text-muted);
  --ink-black:  var(--stz-ink-950);   /* compat alias — mobile drawer scrim */
  /* Foreground on --surface-inverse. Light: that IS --stz-surface-shell, so the
     canonical paired foreground applies verbatim. §B flips it (dark inverts the
     inverse to foam-50). */
  --on-inverse: var(--stz-on-surface-shell);       /* light default; §B flips */
  --rule-ink:   var(--stz-text);

  /* ---- HAIRLINES — from the canonical rule (self-theming) ---- */
  --hairline:        color-mix(in oklab, var(--stz-rule-300) 80%, transparent);
  --hairline-strong: var(--stz-rule-300);
  --hairline-faint:  color-mix(in oklab, var(--stz-rule-300) 45%, transparent);

  /* ---- INFORMATION LAYER — Route Cyan (links / selected / live signal) ---- */
  --accent:       var(--stz-action-secondary);
  --accent-text:  var(--stz-action-secondary);
  --accent-wash:  color-mix(in oklab, var(--stz-action-secondary) 12%, transparent);
  --accent-edge:  color-mix(in oklab, var(--stz-action-secondary) 45%, transparent);
  --accent-glow:  color-mix(in oklab, var(--stz-action-secondary) 28%, transparent);
  /* Paired foreground on the filled --accent (= --stz-action-secondary). The
     canonical token flips with the theme on its own, so §B no longer restates
     these. Never hardcode a foreground onto a fill. */
  --on-accent:       var(--stz-on-action-secondary);
  --on-accent-solid: var(--stz-on-action-secondary);

  /* ---- PRIMARY ACTION — Signal Lime, ONE per region (.btn--primary) ---- */
  --action:      var(--stz-action-primary);
  /* #ffffff on Signal Lime is 1.30:1 — the canonical pairing is the only legal
     foreground here, and it is now a spine token rather than a local guess. */
  --on-action:   var(--stz-on-action-primary);
  --action-edge: color-mix(in oklab, var(--stz-action-primary) 50%, transparent);
  --action-glow: color-mix(in oklab, var(--stz-action-primary) 30%, transparent);
  --glow-action: 0 0 0 1px var(--action-edge), 0 0 28px -6px var(--action-glow);

  /* ---- STATUS ROLES — canonical; labels/shape always accompany color ---- */
  --info:    var(--stz-status-info);
  --warn:    var(--stz-status-warning);
  --danger:  var(--stz-status-danger);
  --success: var(--stz-status-success);
  --rare:    var(--stz-coral-500);   /* the rare interruption — coral's second sanctioned job */

  /* Paired foregrounds for the FILLED status treatments (solid badge, solid
     destructive button). Canonical and self-theming — a fill's foreground must
     track the fill, never the page canvas. */
  --on-info:    var(--stz-on-status-info);
  --on-warn:    var(--stz-on-status-warning);
  --on-danger:  var(--stz-on-status-danger);
  --on-success: var(--stz-on-status-success);

  /* ---- DEPTH — canonical shadows + one hairline lip ---- */
  --shadow-1: inset 0 1px 0 0 color-mix(in oklab, var(--stz-text) 5%, transparent);
  --shadow-2: var(--stz-shadow-card);
  --shadow-3: var(--stz-shadow-feature);
  --glow-accent: 0 0 0 1px var(--accent-edge), 0 0 24px -8px var(--accent-glow);

  /* ---- FOCUS — Coral. The single global focus contract. ---- */
  --ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--stz-focus);
}

/* ════════════════════════════════════════════════════════════════════════
   §B · DARK-THEME EXTRAS — mirrored under the SAME three-state conditions
        as the canonical sheet (explicit dark, or OS-dark with no choice).

        RETIRED (spine @fe8f56e): this block used to derive dark status tones
        locally — color-mix(in oklab, --stz-status-* 45..50%, white) — because
        the spine had no dark status ramp. It now does
        (--stz-status-success/warning/danger flip under both dark conditions),
        so --warn / --danger / --success from §A self-theme and the local
        derivation is gone. It was NOT equivalent: mixing toward white drained
        ~50% of the chroma, collapsing the roles toward mutually similar
        pastels. The spine holds hue and raises luminance instead.

        --on-accent / --on-accent-solid are likewise no longer restated here;
        §A binds them to --stz-on-action-secondary, which flips upstream.
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --surface-sunken:  var(--stz-ink-950);
  --surface-header:  var(--stz-ink-950);
  --surface-inverse: var(--stz-foam-50);
  --on-inverse:      var(--stz-ink-950);   /* on foam-50 — inverse of the shell pairing */
  --accent-text: var(--stz-sky-300);       /* AA link/active ink on ink-900 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --surface-sunken:  var(--stz-ink-950);
    --surface-header:  var(--stz-ink-950);
    --surface-inverse: var(--stz-foam-50);
    --on-inverse:      var(--stz-ink-950);
    --accent-text: var(--stz-sky-300);
  }
}

/* ── §D · Status wash/edge derivations (theme-agnostic; built from semantic) ── */
:root {
  --info-wash:   color-mix(in oklab, var(--info)   14%, transparent);
  --info-edge:   color-mix(in oklab, var(--info)   42%, transparent);
  --warn-wash:   color-mix(in oklab, var(--warn)   16%, transparent);
  --warn-edge:   color-mix(in oklab, var(--warn)   44%, transparent);
  --danger-wash: color-mix(in oklab, var(--danger) 15%, transparent);
  --danger-edge: color-mix(in oklab, var(--danger) 44%, transparent);
  --danger-glow: color-mix(in oklab, var(--danger) 26%, transparent);
  --rare-wash:   color-mix(in oklab, var(--rare)   14%, transparent);
  --rare-edge:   color-mix(in oklab, var(--rare)   44%, transparent);
  --success-wash: color-mix(in oklab, var(--success) 14%, transparent);
  --success-edge: color-mix(in oklab, var(--success) 42%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   §R · ROLE / SCOPE LAYER — [data-role] third axis (contract unchanged).
        Role introduces NO new color. Cyan information marks the scoped
        agent subtree; the home scopes ride the information accent.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --scope-rail:      transparent;
  --scope-chip-tint: var(--surface-raised);
  --scope-chip-ink:  var(--ink-2);
}

[data-role="operator"] {
  --scope-rail:      var(--accent-text);
  --scope-chip-tint: var(--accent-wash);
  --scope-chip-ink:  var(--ink);
}

[data-role="agent"] {
  --scope-rail:      var(--info);
  --scope-chip-tint: var(--info-wash);
  --scope-chip-ink:  var(--ink);
}

[data-role="merchant"] {
  --scope-rail:      var(--accent-text);
  --scope-chip-tint: color-mix(in oklab, var(--accent-wash) 65%, var(--surface-raised));
  --scope-chip-ink:  var(--ink);
}

/* ════════════════════════════════════════════════════════════════════════
   §S · SHELL CHROME SCOPE — Orbit's ink foundation: the top bar and the
        navigation rail sit on --stz-surface-shell in BOTH themes ("shells,
        hero fields, authority"). Custom properties re-resolve for every
        descendant, so the nav-shell slice needs no edits.
   ════════════════════════════════════════════════════════════════════════ */
.shell, .sidebar {
  color-scheme: dark;
  --surface-page:    var(--stz-surface-shell);
  --surface-header:  var(--stz-surface-shell);
  --surface-raised:  var(--stz-navy-800);
  --surface-sunken:  var(--stz-ink-900);
  --ink:   var(--stz-on-surface-shell);   /* the canonical pairing for this fill */
  --ink-2: color-mix(in oklab, var(--stz-on-surface-shell) 85%, var(--stz-surface-shell));
  --ink-3: var(--stz-slate-300);
  --ink-4: var(--stz-slate-300);
  --hairline:        color-mix(in oklab, var(--stz-slate-300) 28%, transparent);
  --hairline-strong: color-mix(in oklab, var(--stz-slate-300) 45%, transparent);
  --hairline-faint:  color-mix(in oklab, var(--stz-slate-300) 16%, transparent);
  --accent:       var(--stz-cyan-500);
  --accent-text:  var(--stz-sky-300);
  --on-accent:       var(--stz-ink-950);
  --on-accent-solid: var(--stz-ink-950);
  --row-hover: color-mix(in oklab, var(--stz-cyan-500) 12%, transparent);
  --info:    var(--stz-cyan-500);
  /* --warn / --danger / --success are deliberately NOT restated here any more.
     The old local color-mix(..., white) derivation is retired with the rest.
     In dark theme this scope now inherits the canonical dark status ramp,
     which is correct. In LIGHT theme this scope is still a dark surface
     (ink-950) but --stz-status-* resolves to the light ramp — see the
     "shell status" gap recorded in docs/brand/brand-implementation-brief.md.
     The spine flips status by THEME; it has no theme-independent
     dark-surface status ramp for permanently-dark chrome. Only
     .side-badge--danger consumes a status role inside this scope. */
}

/* ════════════════════════════════════════════════════════════════════════
   §E · MOTION / ACCESSIBILITY GUARDS
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; --dur-4:1ms; --blink:0s; }
}

/* ════════════════════════════════════════════════════════════════════════
   §F · TINY BASE RESET + BODY WIRING + LIVE-CARET KEYFRAME
        Foundation only — no component classes (those live in elements.css).
   ════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background-color: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  transition: background-color var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out);
}

/* Headlines speak in the condensed display voice — Barlow Condensed ExtraBold */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* The money/data voice — every figure is mono + tabular */
code, kbd, samp, pre, .mono, [data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Media defaults */
img, picture, svg, video, canvas { display: block; max-width: 100%; }
svg { fill: currentColor; }

/* Forms inherit type instead of UA defaults */
button, input, select, textarea { font: inherit; color: inherit; }

/* Links read in the information accent; AA in both themes via --accent-text */
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* The single global focus contract — the coral halo on every interactive element */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-2);
}
:focus:not(:focus-visible) { outline: none; }

/* Selection carries the information signal, quietly */
::selection {
  background: var(--accent-wash);
  color: var(--ink);
}

/* Custom scrollbars stay in-system (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border: 2px solid var(--surface-page);
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/*
 * THE BRAND'S LIVING SIGNATURE — the signal-rail caret, now riding the
 * Route Cyan information layer. step-end snaps (terminal cursor), not fades.
 * Reduced-motion holds it steady (§E: --blink:0s) plus the query below.
 */
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes caret-blink { 0%, 100% { opacity: 1; } }
}

/* Honor OS high-contrast: keep focus + accent legible */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; box-shadow: none; }
}