/* ═══════════════════════════════════════════════════════════════════
   ODYSSEY MACHINE · POLAR SIGNAL — colors_and_type.css
   ───────────────────────────────────────────────────────────────────
   Locked palette. No pure black, no pure white. Anywhere.
   Type: Archivo (sans, 900 display) · JetBrains Mono · Newsreader (serif).
   ═══════════════════════════════════════════════════════════════════ */

/* Archivo + JetBrains Mono ship locally from /fonts. Newsreader (the AUTHOR
   voice) is variable from Google Fonts — supports a real 500 italic. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,700&display=swap");

/* Archivo — variable, 100→900, two axes (wdth, wght) */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("fonts/Archivo-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
}

/* Archivo Black — display weight 900, fixed file. Wins at weight 900 due to source-order. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
}

/* JetBrains Mono — variable */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* Newsreader is loaded via @import at the top of this file. Variable serif,
   real Medium (500) cut. House rule: serif is ALWAYS 500 italic. */

:root {
  /* ─── Surfaces ─────────────────────────────── */
  --polar-white:    #F2F1EC;   /* primary canvas */
  --shell-hi:       #FAF9F4;   /* highlight tint */
  --shell-lo:       #DAD7CF;   /* recess tint */

  --deep-navy:      #0E1A2E;   /* structural dark / type ink */
  --shell-dk-hi:    #1A2840;
  --shell-dk-lo:    #050B17;

  /* ─── Signal palette ───────────────────────── */
  --polaris-gold:   #B8923A;   /* primary signal · CTA · active */
  --gold-soft:      #D4AE4F;
  --gold-dim:       #8C6E26;
  --gold-ring:      rgba(184,146,58,0.22);

  --signal-yellow:  #F5C02B;   /* headline emphasis · sparingly */
  --technical-blue: #2E5BB4;   /* links · strategic accents */
  --signal-red:     #E1251B;   /* alerts only */

  /* ─── Ink ──────────────────────────────────── */
  --ink:            #0E1A2E;   /* body type on light */
  --ink-mute:       #4A5468;   /* secondary copy */
  --ink-faint:      #8893A6;   /* tertiary / hairlines */

  --ink-dk:         #F2F1EC;   /* body type on dark */
  --ink-dk-mute:    rgba(242,241,236,0.62);
  --ink-dk-faint:   rgba(242,241,236,0.32);

  /* ─── Highlights / shadows / rules ─────────── */
  --light:    rgba(250,249,244,0.95);
  --shadow:   rgba(14,26,46,0.18);
  /* On Deep Navy: neumorphic shadows DON'T work well on a dark ground —
     the highlight always either ghost-glows or disappears. So dark RAISED
     surfaces get a soft 1px inset stroke instead of light/shadow. Insets
     keep neumorphic depth (carved wells DO read on dark). */
  --light-dk-inset:  rgba(70,86,118,0.55);  /* lifted navy — only inside wells */
  --shadow-dk-inset: rgba(2,6,14,0.85);
  /* Legacy aliases for any chrome that touches the bare token directly. */
  --light-dk:  var(--light-dk-inset);
  --shadow-dk: var(--shadow-dk-inset);

  --grid:     rgba(14,26,46,0.07);
  --grid-dk:  rgba(242,241,236,0.06);
  --rule:     rgba(14,26,46,0.14);
  --rule-dk:  rgba(242,241,236,0.14);

  /* ─── Semantic foreground / background ─────── */
  --fg-1:     var(--ink);
  --fg-2:     var(--ink-mute);
  --fg-3:     var(--ink-faint);
  --bg-1:     var(--polar-white);
  --bg-2:     var(--shell-hi);

  /* ─── Type families ────────────────────────── */
  --sans:  "Archivo", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", "Times New Roman", Georgia, serif;

  /* ─── Type scale ───────────────────────────── */
  --fs-display:  96px;   /* D-01 — covers, hero */
  --fs-banner:   60px;   /* D-02 — section banners */
  --fs-h1:       48px;
  --fs-h2:       28px;   /* H-01 */
  --fs-h3:       20px;   /* H-02 */
  --fs-body:     16px;   /* B-01 */
  --fs-body-sm:  13px;   /* B-02 */
  --fs-mono:     11px;   /* M-01 */
  --fs-label:    9.5px;  /* L-01 — caps · 0.14em */
  --fs-serif:    22px;   /* S-01 */

  --lh-tight:    0.9;
  --lh-snug:     1.1;
  --lh-body:     1.55;

  --ls-display:  -0.045em;
  --ls-tight:    -0.02em;
  --ls-serif:    -0.018em;   /* Newsreader — tightened kerning for the AUTHOR voice */
  --ls-mono:     0.06em;
  --ls-label:    0.14em;

  /* ─── Spacing (8-pt rhythm) ────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ─── Radii (kept very tight: 0 / 2 / 4 / 6 / 8) ─ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-btn: 6px;
  --r-3: 8px;

  /* ─── Elevation — neumorphic instrument grammar ─ */
  /* Polar White ground only. Inversions on Deep Navy below. */
  --raise-sm: -4px -4px 10px var(--light), 4px 4px 10px var(--shadow);
  --raise:    -8px -8px 18px var(--light), 8px 8px 18px var(--shadow);
  --raise-lg: -14px -14px 32px var(--light), 14px 14px 32px var(--shadow);
  --inset-sm: inset 2px 2px 6px var(--shadow), inset -2px -2px 6px var(--light);
  --inset:    inset 4px 4px 10px var(--shadow), inset -4px -4px 10px var(--light);

  /* Dark RAISED surfaces — soft stroke, no highlights/shadows.
     A 1px inset hairline reads cleanly against the same-color ground.
     The "-sm / / -lg" sizes vary stroke opacity, not blur radius. */
  --raise-dk-sm: inset 0 0 0 1px rgba(242,241,236,0.10);
  --raise-dk:    inset 0 0 0 1px rgba(242,241,236,0.14);
  --raise-dk-lg: inset 0 0 0 1px rgba(242,241,236,0.20);
  /* Dark INSET (carved wells) — same vocabulary as raises: soft 1px stroke,
     no neumorphism, no inner darkening. The well shares the ground color;
     the stroke alone defines the perimeter. (Kept distinct token names so
     consumers can still semantically tag a "well" vs a "card".) */
  --inset-dk-sm: inset 0 0 0 1px rgba(242,241,236,0.10);
  --inset-dk:    inset 0 0 0 1px rgba(242,241,236,0.14);

  /* ─── Motion ───────────────────────────────── */
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   320ms;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html, body {
  background: var(--polar-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC ELEMENTS — the system as defaults
   Use CSS classes only when you need a specific variant; bare h1/h2/p
   should already be on-spec.
   ═══════════════════════════════════════════════════════════════════ */

h1, .h1-display {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(52px, 8vw, var(--fs-display));
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
h1 em, .h1-display em { font-style: normal; color: var(--polaris-gold); }

h2, .h2-banner {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(36px, 5.4vw, var(--fs-banner));
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h2 em, .h2-banner em { font-style: normal; color: var(--polaris-gold); }

h3, .h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
h3 em, .h3 em { font-style: normal; color: var(--polaris-gold); }

h4, .h4 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}

p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-mute);
  text-wrap: pretty;
}
p strong { color: var(--ink); font-weight: 700; }

/* Editorial / serif — the AUTHOR voice. House rule: serif is ALWAYS 600 italic.
   Color is muted ink so the serif lede sits BELOW the headline in the visual
   hierarchy — Newsreader italic next to a 96px Archivo black is too much
   weight at full strength; --ink-mute lets the serif breathe instead of
   fighting the H1. */
.lede,
.pull,
.serif {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-serif);
  line-height: 1.35;
  color: var(--ink-mute);
  letter-spacing: var(--ls-serif);
  font-feature-settings: "kern" 1, "liga" 1;
}
.lede em, .pull em, .serif em {
  font-style: italic;
  color: var(--polaris-gold);
}

/* Headline → serif-deck pairing — adds breathing room between the big sans
   display and the italic lede. Collapses with h1's existing 24px bottom
   margin to a 32px gap, which is the minimum that doesn't read as cramped
   under display-size H1s. */
h1 + .lede,
h1 + .pull,
h1 + .serif,
h2 + .lede,
h2 + .pull,
h2 + .serif,
.h1-display + .lede,
.h2-banner + .lede {
  margin-top: var(--sp-6);
}

.pull {
  font-family: var(--sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  position: relative;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.pull::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 44px; height: 3px; background: var(--polaris-gold);
}

/* Mono — the INSTRUMENT voice */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.label.hot,
.mono.hot { color: var(--polaris-gold); }

/* Code blocks — instrument readouts */
code, pre, kbd {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0;
  color: var(--ink);
}

/* Links — Technical Blue, never gold */
a, .link {
  color: var(--technical-blue);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--technical-blue) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--t-fast) var(--ease);
}
a:hover, .link:hover {
  border-bottom-color: var(--technical-blue);
}

/* Hairline divider */
hr, .hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-5) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPE UTILITIES — explicit overrides when needed
   ═══════════════════════════════════════════════════════════════════ */
.t-display { font: 900 var(--fs-display)/var(--lh-tight) var(--sans); letter-spacing: var(--ls-display); text-transform: uppercase; }
.t-banner  { font: 900 var(--fs-banner)/0.95 var(--sans); letter-spacing: -0.04em; text-transform: uppercase; }
.t-h2      { font: 800 var(--fs-h2)/var(--lh-snug) var(--sans); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.t-h3      { font: 800 var(--fs-h3)/1.2 var(--sans); letter-spacing: -0.015em; text-transform: uppercase; }
.t-body    { font: 500 var(--fs-body)/var(--lh-body) var(--sans); }
.t-body-sm { font: 500 var(--fs-body-sm)/1.45 var(--sans); }
.t-mono    { font: 600 var(--fs-mono)/1 var(--mono); letter-spacing: var(--ls-mono); text-transform: uppercase; }
.t-label   { font: 700 var(--fs-label)/1 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-serif   { font: 500 var(--fs-serif)/1.35 var(--serif); font-style: italic; letter-spacing: var(--ls-serif); }

/* On-dark variants */
.on-dark { color: var(--ink-dk); }
.on-dark p { color: var(--ink-dk-mute); }
.on-dark p strong { color: var(--ink-dk); }
.on-dark .mono, .on-dark .label { color: var(--ink-dk-mute); }
.on-dark .label.hot, .on-dark .mono.hot { color: var(--polaris-gold); }
.on-dark a { color: var(--polar-white); border-bottom-color: var(--polaris-gold); }

/* Selection — never gold (gold is earned) */
::selection { background: var(--ink); color: var(--polar-white); }