/* ============================================================
   COLORS — CommsOS palette
   SFG house navy + cream, with SIGNAL TEAL as the CommsOS
   signature accent (FoundersTriple owns copper, RightsDocket
   owns amber — CommsOS owns teal).
   ============================================================ */
:root {
  /* BYLINE v2 - NEWSROOM TUNING (Direction A, founder-picked 2026-08-29).
     RECONCILED WITH THE CLAUDE DESIGN MASTER 2026-09-03: this file, base.css,
     fonts.css and typography.css were pushed up together, so a pull is safe
     again. They move as ONE change - the teal below is hardcoded as rgba() in
     base.css - so this file is never pushed or pulled on its own.
     Editorial north: The Atlantic / The Economist / PR Week / MM&M. */
  /* ---- Brand: Navy (the shared SFG anchor) ---- */
  --navy-ink: #050d1b;       /* deepest — hero scrims */
  --navy: #0a192f;           /* primary brand navy */
  --navy-700: #102844;       /* navy-soft / hover surfaces */
  --navy-600: #1b3a5c;
  --navy-500: #2d4f72;

  /* ---- Brand: Signal Teal (CommsOS signature accent) ---- */
  --teal-bright: #22a795;    /* glow / live state */
  --teal: #0f7f72;           /* signature accent */
  --teal-600: #0d746a;
  --teal-deep: #0b6a5f;      /* AA text on cream/white */
  --teal-ink: #084f46;
  --teal-50: #e9f4f0;        /* tint wash */
  --teal-100: #cde7e0;
  --teal-grad: linear-gradient(135deg, #2aa897 0%, #0f7f72 56%, #0b6a5f 100%); /* @kind color */

  /* ---- Neutrals: cream / steel / slate ---- */
  --cream: #faf9f6;          /* warm app canvas */
  --cream-warm: #f2ede4;     /* alternating section band */
  --steel: #f0f4f8;          /* cool surface / chips */
  --paper: #ffffff;          /* cards */
  --slate: #637083;          /* secondary text */
  --slate-soft: #8a94a3;     /* tertiary text / placeholder */

  /* ---- Hairlines ---- */
  --rule: rgba(10, 25, 47, 0.12);
  --rule-strong: rgba(10, 25, 47, 0.22);
  --rule-light: rgba(240, 244, 248, 0.14); /* on navy */

  /* ============================================================
     SEMANTIC STATES — v3, 2026-09-03. Each state is a TRIAD plus a base;
     use them together and never mix a member of one state with another.

       base    solid fills, icons, rules, meters. NOT text on the tint.
       ink     text on the matching tint. AA-verified, see below.
       tint    the chip / panel fill, 8% over the card.
       border  the hairline around a tinted element.

     WHY THE HUES MOVED. The previous set paired ochre with oxblood, a
     traditional combination that aged every surface carrying a status.
     The replacements are brighter and cleaner at full strength, and the
     tint drops from 10/9% to a uniform 8% so a dense table stays quiet
     while the solid swatch reads current.

     BORDERS are opaque hex, not rgba, and all three are systematically
     derived: the base composited at 20% over white. Opaque means a chip
     reads identically on paper, cream and steel, where a translucent
     border shifts with whatever sits behind it. This retires two older
     treatments at once — the rgba(...,0.4) borders inlined in base.css
     and StatusPill.jsx, which sat well outside the 12-22% hairline range
     the rest of the system keeps to, and the three opaque hexes the app
     hardcoded in 14 places, which were derived from the OLD hues.

     INK is verified at 10.5px against its own tint over white. Ratios,
     written without the leading dashes so the contrast test's token
     regex cannot match these comment lines:
       ready-ink   on ready-tint     6.86:1  AA
       caution-ink on caution-tint   6.26:1  AA
       blocked-ink on blocked-tint   6.54:1  AA
     Text on a tint always takes the ink. The base value is not safe there:
     the previous ready base scored 4.25:1 on its own tint, which is the
     failure this triad exists to close.
     ============================================================ */
  --ready: #00875a;              /* ready / approved / confirmed */
  --ready-ink: #0a5f42;          /* AA text on ready-tint */
  --ready-tint: rgba(0, 135, 90, 0.08);
  --ready-border: #cce7de;

  --caution: #b54708;            /* pending review / draft */
  --caution-ink: #8f4409;        /* AA text on caution-tint */
  --caution-tint: rgba(181, 71, 8, 0.08);
  --caution-border: #f0dace;

  --blocked: #d92d20;            /* blocked / gate fail / stale */
  --blocked-ink: #a32319;        /* AA text on blocked-tint */
  --blocked-tint: rgba(217, 45, 32, 0.08);
  --blocked-border: #f7d5d2;

  --info: var(--teal-deep);      /* informational */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components.
     ============================================================ */
  --bg-app: var(--cream);
  --bg-band: var(--cream-warm);
  --bg-inverse: var(--navy);
  --surface-card: var(--paper);
  --surface-sunken: var(--steel);

  --text-strong: var(--navy);
  --text-body: rgba(10, 25, 47, 0.78);
  --text-muted: var(--slate);
  --text-faint: var(--slate-soft);
  --text-on-dark: var(--steel);
  --text-on-dark-muted: rgba(240, 244, 248, 0.62);

  --accent: var(--teal);
  --accent-strong: var(--teal-deep);
  --accent-fg: #ffffff;
  --accent-wash: var(--teal-50);

  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --ring: var(--teal);
}