/*
 * indigo-dispatch — Design Tokens (CSS)
 *
 * Aesthetic: Dark editorial-meets-technical communiqué.
 *            Mono metadata, condensed/geometric display, hairline rules.
 *            Distilled from outpost-mobile-voice + hq-pro-stack-split deploys.
 *
 * Status:    draft
 * Source:    https://outpost-mobile-voice.indigo-hq.com
 *            https://hq-pro-stack-split.indigo-hq.com  (Indigo-internal)
 * Updated:   2026-05-26
 *
 * Naming convention follows knowledge/design-styles/PACK-SCHEMA.md:
 *   --<category>-<role>: <value>
 *   Categories: color, font, fs, fw, tracking, lh, space, radius, border, ease, duration.
 *
 * Pack signature extensions (clearly labeled below):
 *   --ink-*  opacity tiers used by editorial mode for layered text.
 *   --rule-* opacity/weight tiers used for hairline structure.
 *   --grid-line subtle background grid used by technical mode.
 */

:root {
  /* ────────────────────────────────────────────────────────── */
  /* Color — palette (raw values)                                */
  /* ────────────────────────────────────────────────────────── */

  --color-bg:           #0a0b0d;   /* primary page background (dark-first) */
  --color-bg-deep:      #060606;   /* deepest negative space */
  --color-bg-alt:       #0f1115;   /* alt page tint (technical-mode grid bg) */
  --color-surface:      #14171d;   /* card / table-head / code block */
  --color-surface-deep: #1a1e25;   /* nested surface */
  --color-surface-soft: #161616;   /* editorial scene/step background */

  /* Neutrals */
  --color-ink:          #ffffff;          /* primary text — editorial */
  --color-ink-soft:     #e7e9ec;          /* primary text — technical (slightly off-white) */
  --color-ink-muted:    #9ca3ad;          /* secondary text */
  --color-ink-deep:     #6a7079;          /* tertiary / mono metadata */
  --color-ink-faint:    #4a4f57;          /* dim labels, gutters */
  --color-ink-stamp:    #c8ccd2;          /* mono text on a panel surface */

  /* Structural borders */
  --color-border:       #262b35;          /* default rule on dark */
  --color-border-bright:#3a414f;          /* plates, table edges */

  /* Accents — TWO mode-specific accents. Pick one per artifact.       */
  /*   --color-accent-editorial  — periwinkle, soft, used on outpost.  */
  /*   --color-accent-technical  — indigo,    vivid, used on stacksplit.*/
  /* --color-accent points to the default (technical).                 */
  --color-accent-editorial: #7B9BC7;
  --color-accent-technical: #6b7cff;
  --color-accent:           var(--color-accent-technical);

  /* Status palette (shared across both modes) */
  --color-pass:    #4ade80;
  --color-emerald: #7ec9a4;   /* editorial alt — softer pass */
  --color-warn:    #f5b441;
  --color-amber:   #f6c177;   /* editorial alt — softer warn */
  --color-err:     #ff6b6b;

  /* Semantic role tokens — components reference THESE, not raw palette. */
  --color-text:         var(--color-ink-soft);
  --color-text-muted:   var(--color-ink-muted);
  --color-text-deep:    var(--color-ink-deep);
  --color-text-on-dark: var(--color-ink);
  --color-bg-page:      var(--color-bg);
  --color-bg-panel:     var(--color-surface);

  /* ────────────────────────────────────────────────────────── */
  /* Pack signature — opacity tiers (extension to schema)        */
  /* Editorial mode lives on these. Layered transparency lets    */
  /* one ink color carry hierarchy without introducing new hues. */
  /* ────────────────────────────────────────────────────────── */

  --ink-85: rgba(255,255,255,0.85);
  --ink-65: rgba(255,255,255,0.65);
  --ink-50: rgba(255,255,255,0.50);
  --ink-35: rgba(255,255,255,0.35);
  --ink-22: rgba(255,255,255,0.22);
  --ink-12: rgba(255,255,255,0.12);
  --ink-06: rgba(255,255,255,0.06);

  --rule-soft:    rgba(255,255,255,0.08);
  --rule-mid:     rgba(255,255,255,0.14);
  --rule-strong:  rgba(255,255,255,0.28);
  --grid-line:    rgba(255,255,255,0.025);   /* technical-mode bg grid */

  /* ────────────────────────────────────────────────────────── */
  /* Typography — Font Families                                  */
  /* Pack pairs ONE display face per artifact:                   */
  /*   Editorial: Oswald (condensed, uppercase, big hero type).  */
  /*   Technical: Space Grotesk (geometric, lowercase friendly). */
  /* Mono and body never change.                                 */
  /* ────────────────────────────────────────────────────────── */

  --font-display:           "Space Grotesk", "Inter", sans-serif;
  --font-display-editorial: "Oswald", "Industry", "Trade Gothic", sans-serif;
  --font-body:              "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:              "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-slab:              "Roboto Slab", Georgia, serif;   /* italic em + scene blockquote */
  --font-label:             var(--font-mono);                /* alias — labels are always mono */

  /* ────────────────────────────────────────────────────────── */
  /* Typography — Fluid Type Scale                               */
  /* ────────────────────────────────────────────────────────── */

  --fs-hero:    clamp(54px, 8.4vw, 120px);   /* editorial hero (Oswald) */
  --fs-h1:      52px;                         /* technical title (Space Grotesk) */
  --fs-h2-ed:   clamp(31px, 4vw, 52px);       /* editorial h2 */
  --fs-h2:      28px;                         /* technical h2 */
  --fs-h3:      17px;                         /* technical h3 */
  --fs-lead-ed: clamp(18px, 1.8vw, 22px);     /* editorial lead */
  --fs-lead:    18px;                         /* technical lead */
  --fs-body:    15.5px;                       /* body */
  --fs-body-sm: 13.5px;                       /* table / dense */
  --fs-label:   11px;                         /* eyebrows, kickers */
  --fs-meta:    10.5px;                       /* meta strips, stamps */
  --fs-caption: 10px;                         /* plate labels, dim badges */

  /* ────────────────────────────────────────────────────────── */
  /* Typography — Weights                                        */
  /* ────────────────────────────────────────────────────────── */

  --fw-light:    300;   /* body bias — both modes default to light body */
  --fw-regular:  400;
  --fw-medium:   500;   /* labels, buttons, technical h2/h3 */
  --fw-semibold: 600;   /* Oswald hero only */

  /* ────────────────────────────────────────────────────────── */
  /* Typography — Letter Spacing (tracking tiers)                */
  /* ────────────────────────────────────────────────────────── */

  --tracking-tight:        -0.015em;   /* technical headlines (Space Grotesk) */
  --tracking-normal:        0em;
  --tracking-display-ed:    0.04em;    /* editorial headlines (Oswald — open slightly) */
  --tracking-body:          0.005em;
  --tracking-label:         0.10em;    /* small mono chips */
  --tracking-meta:          0.14em;    /* meta rows, table head */
  --tracking-eyebrow:       0.18em;    /* eyebrows, kickers, stamps */
  --tracking-expanded:      0.20em;    /* deepest caps labels */

  /* ────────────────────────────────────────────────────────── */
  /* Typography — Line Heights                                   */
  /* ────────────────────────────────────────────────────────── */

  --lh-hero:     0.92;
  --lh-display:  1.04;
  --lh-heading:  1.08;
  --lh-lead:     1.55;
  --lh-body:     1.7;
  --lh-label:    1.2;
  --lh-mono:     1.7;

  /* ────────────────────────────────────────────────────────── */
  /* Spacing                                                     */
  /* ────────────────────────────────────────────────────────── */

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  14px;     /* tldr/manifesto gap, between cards */
  --space-lg:  22px;     /* panel inner pad */
  --space-xl:  32px;     /* frame side padding */
  --space-2xl: 56px;     /* editorial inter-block */
  --space-3xl: 64px;     /* technical section padding */
  --space-4xl: 84px;     /* editorial section padding */

  --shell-max:        1080px;
  --shell-pad:        var(--space-xl);
  --section-pad:      var(--space-3xl);
  --section-pad-ed:   var(--space-4xl);

  /* ────────────────────────────────────────────────────────── */
  /* Radius                                                      */
  /* HARD CORNERS EVERYWHERE. This pack is industrial/editorial. */
  /* The only allowed radius is 50% for dot indicators.          */
  /* ────────────────────────────────────────────────────────── */

  --radius-none:   0;
  --radius-circle: 50%;

  /* ────────────────────────────────────────────────────────── */
  /* Borders                                                     */
  /* ────────────────────────────────────────────────────────── */

  --border-hairline:    1px solid var(--rule-soft);             /* default */
  --border-divider:     1px solid var(--color-border);
  --border-structural:  1px solid var(--color-border-bright);   /* plates, tables, panels */
  --border-strong:      1px solid var(--rule-strong);           /* phone frame, hero plate */
  --border-accent:      2px solid var(--color-accent);          /* callout left-bar */

  /* ────────────────────────────────────────────────────────── */
  /* Motion                                                      */
  /* ────────────────────────────────────────────────────────── */

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ────────────────────────────────────────────────────────── */
  /* Mode helpers                                                */
  /* Used as body classes — see mode-editorial / mode-technical. */
  /* ────────────────────────────────────────────────────────── */

  --bg-radial-ed:
    radial-gradient(1200px 600px at 80% -10%, rgba(123,155,199,0.06), transparent 60%),
    radial-gradient(900px  500px at -10% 110%, rgba(255,255,255,0.03), transparent 60%);
}

/* ────────────────────────────────────────────────────────── */
/* Base resets + body backgrounds                              */
/* ────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial body — radial atmospheric washes */
body.mode-editorial {
  background: var(--bg-radial-ed), var(--color-bg);
}

/* Technical body — 40px hairline grid (faint structure) */
body.mode-technical {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  min-height: 100vh;
}

/* ────────────────────────────────────────────────────────── */
/* Reduced Motion (required — never remove)                    */
/* ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}