/* ============================================================
   PSI v2 — COHESIVE SYSTEM LAYER
   ------------------------------------------------------------
   Every page still carries its own inline <style> block for
   layout. This file holds the decisions that must be identical
   everywhere, and is linked AFTER that block so it wins the
   cascade without needing !important.

   Surfaces are declared on <body>:
     data-surface="ink"    black canvas, white type
     data-surface="paper"  white canvas, black type
   ============================================================ */

/* ------------------------------------------------------------
   1. THE ACCENT WORD
   Display type is never coloured gold. On paper, gold type is
   ~1.7:1 and unreadable; on either surface it reads as a weaker
   headline rather than an emphasised one. The accent word takes
   the tape instead — black type on a yellow ground, which is the
   system's own nameplate idiom.
   ------------------------------------------------------------ */
.tape,
[data-surface="paper"] .aurora-text,
[data-surface="paper"] [class*="-num"],
[data-surface="paper"] [class*="headline"] em,
[data-surface="paper"] [class*="headline"] strong {
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 0 0.16em 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: normal;
  -webkit-text-fill-color: var(--on-yellow);
}

/* On the black surface the accent word stays plain yellow — full
   contrast already, and a tape on every headline would be shouting. */
[data-surface="ink"] .aurora-text {
  color: var(--yellow);
  -webkit-text-fill-color: var(--yellow);
  font-style: normal;
  background: none;
}

/* ------------------------------------------------------------
   2. NO ITALIC IN DISPLAY TYPE
   <em> is italic by user-agent default, so display type needs an
   explicit override, not merely the absence of a declaration.
   Prose italic — pull quotes, captions, asides, attribution — is
   the one place the system allows it and is untouched here.
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
[class*="headline"], [class*="headline"] em, [class*="headline"] span,
[class*="-title"], [class*="-title"] em,
[class*="-head"], [class*="-head"] em,
[class*="-num"], [class*="eyebrow"], [class*="-label"],
.tape, .aurora-text, .nav-logo {
  font-style: normal;
}

/* ------------------------------------------------------------
   3. NO GREY TYPE
   Rank comes from size, weight and tracking — never from a
   washed-out grey. Borders and rules are unaffected.
   ------------------------------------------------------------ */
[data-surface="ink"]  { --body: #FFFFFF; --body-dim: #FFFFFF; --body-meta: #FFFFFF; }
[data-surface="paper"] { --body: #0B0B0B; --body-dim: #0B0B0B; --body-meta: #0B0B0B; }

/* ============================================================
   4. REVERSED TYPE
   White on black optically blooms — strokes spread and counters
   close. Subpixel antialiasing fattens light-on-dark; grayscale
   keeps it thin. The paper surface keeps the default, where
   subpixel is the better rendering.
   ============================================================ */
[data-surface="ink"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   5. THE GLOW IS OFF
   The aurora era left coloured halos behind under these names.
   Remapping them to nothing retires every `var()` reference to a
   glow in one place; the handful of pages that hard-code a yellow
   box-shadow are fixed at the page.
   ------------------------------------------------------------ */
:root {
  --yellow-glow:   transparent;
  --red-glow:      transparent;
  --shadow-yellow: none;
  --shadow-red:    none;
}

/* Nothing interactive carries a shadow. The only sanctioned shadow
   in the system sits beneath a mockup depicting a physical object,
   which is never one of these elements. */
button, .btn, [class*="btn-"], [class*="-btn"],
input, select, textarea,
[class*="card"], [class*="-cta"] {
  box-shadow: none;
}

/* ------------------------------------------------------------
   6. THE SURFACES WE DIDN'T DRAW
   Selection, caret, focus ring and scrollbar ship with browser
   defaults that belong to no design system. They take the palette
   like everything else, and they flip with the surface.
   ------------------------------------------------------------ */
::selection            { background: var(--yellow); color: var(--on-yellow); }
::-moz-selection       { background: var(--yellow); color: var(--on-yellow); }

[data-surface="ink"]   { scrollbar-color: var(--yellow) #000000; }
[data-surface="paper"] { scrollbar-color: #0B0B0B #FFFFFF; }
[data-surface] { scrollbar-width: thin; }

[data-surface="ink"]   input,
[data-surface="ink"]   textarea { caret-color: var(--yellow); }
[data-surface="paper"] input,
[data-surface="paper"] textarea { caret-color: #0B0B0B; }

/* A keyboard user gets a ring that is visible on either ground, and
   never the UA's own blue. Mouse users never see it. */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 0;
}
[data-surface="paper"] :focus-visible {
  outline: 2px solid #0B0B0B;
}
:focus:not(:focus-visible) { outline: none; }

/* Prose links declare themselves by underline, not by colour alone. */
[data-surface="ink"] p > a:not([class]),
[data-surface="ink"] article li > a:not([class]) {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
[data-surface="paper"] p > a:not([class]),
[data-surface="paper"] article li > a:not([class]) {
  color: #0B0B0B;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------
   7. NUMBERS LINE UP
   Prices, dates, timecodes and table figures are compared down a
   column, so the digits are fixed-width everywhere.
   ------------------------------------------------------------ */
[data-surface] table,
[data-surface] [class*="price"],
[data-surface] [class*="stat"],
[data-surface] [class*="compare"],
[data-surface] time,
[data-surface] code,
[data-surface] kbd {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}
