/* Vyzora Editorial Authority — Lead Market Identity (ADR-008-D Amendment 2)
 * ----------------------------------------------------------------------------
 * AUTHORIZED 2026-05-17 by founder. Replaces Signal Map (retired) as the
 * lead market-facing surface mode. Adopts the Replit prototype palette
 * VERBATIM — values copied byte-for-byte from cloud/ui/src/styles/tokens.css.
 *
 * Reading: published institutional thinking. The register of an in-house
 * magazine produced by a research desk; a quarterly issued by a central bank;
 * a long-form feature in a financial weekly. Substrate is warm paper.
 * Metadata reads in warm bronze. Hairlines hold the page open with soft tan,
 * not hard black.
 *
 * Reference register: Bloomberg Businessweek interior (Turley era 2013–2016),
 * Real Review, The Drift, MIT Tech Review covers, vintage Financial Times
 * weekend supplements.
 *
 * Anti-pattern: must NOT read as SaaS landing, transit poster, wellness brand,
 * Substack template, luxury watch microsite, hospitality site, a16z research
 * post, crypto-prestige metallic, or magazine skeuomorph (no fake paper
 * texture, no torn edges, no ink bleed).
 *
 * Signature elements (the things a stranger remembers a week later):
 *   1. Warm bronze --ink-2 #9C8B72 metadata
 *   2. Soft tan --rule #C5B99A hairlines
 *   3. Oxidized brass --signal-amber #C68A2E primary accent
 *
 * Bricolage Grotesque / Spectral / JuliaMono (ADR-008-E) unchanged.
 *
 * WCAG handling: Replit bronze fails AA at body sizes (3.16:1 on paper).
 * Discipline is type-size + role assignment, NOT hex modification.
 *   - body text → --ink (14.8:1 AAA, all sizes)
 *   - eyebrow/metadata/secondary labels → --ink-2 (large-text-only, 18pt+)
 *   - tertiary decorative → --ink-3 (NEVER read-to-operate text)
 *   - amber → 18pt+ headings, icons, button backgrounds (never 14px body)
 *
 * Chrome-lint enforces these floors via a font-size × computed-color rule.
 * ============================================================================
 */

[data-surface-mode="editorial"] {
  /* ── Primitives — Replit verbatim ────────────────────────────────────── */

  /* Light mode surfaces (lead direction for marketing/identity) */
  --surface:       #F1ECE0;  /* paper substrate */
  --surface-2:     #EAE5D8;  /* secondary surface, slight inset */
  --surface-3:     #E2DBCA;  /* elevated chip / card-on-card */

  /* Light mode ink */
  --ink:           #1A1814;  /* warm near-black — primary text, headlines */
  --ink-2:         #9C8B72;  /* WARM BRONZE — eyebrow/metadata/labels (18pt+ only) */
  --ink-3:         #B5A98F;  /* warm sand — tertiary decorative, NEVER text */

  /* Light mode rule */
  --rule:          #C5B99A;  /* soft tan hairline — the second signature */

  /* Signal accents (global to mode, function across light + dark) */
  --signal-amber:       #C68A2E;  /* oxidized brass — primary accent / active route */
  --signal-amber-light: #E8A83E;  /* hover / decorative-only */
  --signal-rust:        #8C3A1F;  /* deep oxblood — halt / escalation */
  --signal-rust-light:  #B04A2A;  /* hover */
  --signal-moss:        #4A5D2E;  /* deep forest — staged / awaiting */
  --signal-moss-light:  #5E7539;  /* hover */
  --signal-slate:       #3A4754;  /* cool slate — passive / idle / archived */
  --signal-slate-light: #4A5A6B;  /* hover */

  /* ── Semantic role mapping ───────────────────────────────────────────── */

  --bg-primary:         var(--surface);
  --surface-1:          var(--surface);
  /* --surface-2 already defined above (Replit primitive) */
  /* --surface-3 already defined above (Replit primitive) */

  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-2);
  --text-tertiary:      var(--ink-2);     /* differentiate by weight/scale, not color (ADR-008-A) */

  --border-hairline:    var(--rule);      /* soft tan — major identity change */
  --border-hairline-soft: var(--rule);    /* card-hairline primitive picks this up */
  --border-strong:      var(--ink);       /* strong rules stay ink — masthead, table headers, signature lines */

  /* Routing roles */
  --route-passive:      var(--signal-slate);
  --route-active:       var(--signal-amber);
  --route-staged:       var(--signal-moss);
  --route-channel:      var(--ink);       /* NO BLUE — channels read as ink lines */

  /* State semantics — soft editorial layer (Emergency Directive intervention
   * layer remains the master halt-on-NO vermillion #C4452D for high-consequence
   * blocks). --signal-rust here is the editorial-warning register only. */
  --state-active:       var(--signal-amber);
  --state-pending:      var(--signal-moss);
  --state-blocked:      var(--signal-rust);
  --state-passive:      var(--signal-slate);

  /* Action — CTA from contrast (ink-on-paper), not color */
  --action-primary:        var(--ink);
  --action-primary-hover:  var(--surface);   /* invert on hover */
  --action-primary-press:  var(--surface-2);
  --text-on-action:        var(--surface);

  /* Accent / trace (active route) */
  --accent-trace:       var(--signal-amber);
  --accent-trace-soft:  var(--signal-moss-light);

  /* Mode-bridge for transitions into Midnight Command (authenticated/dashboard) */
  --mode-bridge-fg:     var(--surface);
  --mode-bridge-bg:     #0B0D10;           /* matches editorial dark --surface */

  /* Eyebrow tracking — per-mode (typography-director audit 2026-05-17) */
  --eyebrow-tracking:   0.10em;
}

/* ── Editorial dark band (footer, transition into authenticated mode) ───
 * Used as <section data-editorial-dark>...</section> within an editorial page,
 * NOT a separate full-mode swap. For full authenticated dashboard rendering,
 * use data-surface-mode="midnight-command".
 */
[data-surface-mode="editorial"] [data-editorial-dark] {
  --bg-primary:         #0B0D10;
  --surface-1:          #131720;
  --surface-2:          #1C2230;
  --text-primary:       #E8EAEC;
  --text-secondary:     #9BA3AF;
  --text-tertiary:      #5C6470;
  --border-hairline:    #2A2F36;
  --border-hairline-soft: #2A2F36;
  --border-strong:      #E8EAEC;
  --action-primary:     var(--signal-amber);
  --text-on-action:     #0B0D10;
}

/* ── Editorial Authority application grammar (ADR-008-D Amendment 2 follow-up
 *    locked 2026-05-18 per art-director firing). Amber as filled-mass identity
 *    at three scales: 4×22 brand bar, 96×2 masthead rule segment, 13pt filled
 *    CTA. Promotes muted-editorial-only reading into vivid-editorial reading
 *    while preserving the bronze WCAG floor (read-to-operate text stays --ink).
 *    These classes apply on top of the .site-header pattern and supersede
 *    weaker variants on /spec/start, /platform, /investors, /operator,
 *    /spec/{id}/progress where the page port left out the load-bearing moves.
 * ============================================================================ */

/* Change 1 — promote brand from 8px dot to 4×22 printer's-mark bar.
   Applies inside [data-surface-mode="editorial"] only; other modes keep their
   own brand treatment. */
[data-surface-mode="editorial"] .site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-variation-settings: "wght" 600, "wdth" 90;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  text-decoration: none;
}
/* Replace the existing ::before dot with the bar */
[data-surface-mode="editorial"] .site-header__brand::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--signal-amber);
  border-radius: 0;
  margin: 0;
  vertical-align: baseline;
}

/* Change 2 — masthead identity rule with 96×2 amber segment at left edge.
   Sits as a ::after on .site-header so the segment overlaps the bottom border. */
[data-surface-mode="editorial"] .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-primary);
  border-bottom: var(--border-hair) solid var(--rule);
}
[data-surface-mode="editorial"] .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 96px;
  height: 2px;
  background: var(--signal-amber);
  pointer-events: none;
}

/* Change 3 — nav links promoted to --ink JuliaMono small caps, amber active.
   Overrides the per-page declarations that used --ink-2 (3.16:1 ghostly). */
[data-surface-mode="editorial"] .site-header__link {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 400;
}
[data-surface-mode="editorial"] .site-header__link:hover {
  color: var(--signal-amber);
}
[data-surface-mode="editorial"] .site-header__link.is-active,
[data-surface-mode="editorial"] .site-header__link[aria-current="page"] {
  color: var(--signal-amber);
  border-bottom: 1px solid var(--signal-amber);
  padding-bottom: 2px;
  font-weight: 400;
}

/* Change 4 — form structure: heavy ink rule above, soft tan below, 180px gutter.
   Apply via .editorial-form-block wrapper on form sections that should read as
   published submission slips (spec-start, investors, platform lead). Mobile
   collapses to single column. */
[data-surface-mode="editorial"] .editorial-form-block {
  border-top: 1px solid var(--ink);
  border-bottom: var(--border-hair) solid var(--rule);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  [data-surface-mode="editorial"] .editorial-form-block {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
[data-surface-mode="editorial"] .editorial-form-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
[data-surface-mode="editorial"] .editorial-form-block__field textarea,
[data-surface-mode="editorial"] .editorial-form-block__field input[type="text"],
[data-surface-mode="editorial"] .editorial-form-block__field input[type="email"] {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  width: 100%;
  border-bottom: var(--border-hair) solid var(--rule);
  padding: 4px 0;
  resize: vertical;
}
[data-surface-mode="editorial"] .editorial-form-block__field textarea:focus,
[data-surface-mode="editorial"] .editorial-form-block__field input:focus {
  outline: none;
  border-bottom-color: var(--signal-amber);
}

/* Change 5 — promote action-primary from text link to filled-amber button.
   Replaces .btn-primary on Editorial pages; .editorial-action is the new
   canonical primary action class. Existing .btn-primary stays for back-compat
   but Editorial pages should prefer this. */
[data-surface-mode="editorial"] .editorial-action,
[data-surface-mode="editorial"] .btn-primary {
  background: var(--signal-amber);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-variation-settings: "wght" 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  min-height: 44px;
}
[data-surface-mode="editorial"] .editorial-action:hover,
[data-surface-mode="editorial"] .btn-primary:hover {
  background: var(--signal-amber-light);
  color: var(--ink);
  opacity: 1;
}
/* Secondary action stays outlined-ink */
[data-surface-mode="editorial"] .editorial-action--secondary,
[data-surface-mode="editorial"] .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: var(--border-hair) solid var(--ink);
}
[data-surface-mode="editorial"] .editorial-action--secondary:hover,
[data-surface-mode="editorial"] .btn-secondary:hover {
  background: var(--ink);
  color: var(--surface);
}

/* Header CTA "Start a run" gets the filled-amber treatment too */
[data-surface-mode="editorial"] .site-header__cta {
  background: var(--signal-amber);
  color: var(--ink);
  border: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0;
}
[data-surface-mode="editorial"] .site-header__cta:hover {
  background: var(--signal-amber-light);
  color: var(--ink);
}

/* ── Forbidden CSS patterns on Editorial surfaces — enforced via chrome-lint:
 *   - Raw hex literals outside this file
 *   - --signal-bone / --signal-ink / --signal-route-blue / --signal-orange /
 *     --signal-yellow / --signal-proof / --signal-deep (Signal Map retired)
 *   - --color-purple / --color-cobalt / --color-indigo (legacy)
 *   - linear-gradient on chrome
 *   - filter: blur > 0 (glassmorphism)
 *   - box-shadow spread > 2px (glow)
 *   - --ink-2 / --ink-3 / --signal-amber applied as `color:` on font-size < 18px
 *     (contrast-floor lint — fails AA on warm paper)
 */