/* ──────────────────────────────────────────────────────────────────
   Eqxia — Design tokens
   colors_and_type.css

   Single source of truth for the 5-value palette, ink-opacity scale,
   and the 4-role type system. Load from Google Fonts; no local TTFs.

   Surfaces are warm by default (IVORY). Hierarchy is built with INK
   opacities, NEVER with extra hues. TEAL is the slash colour only —
   never used for paragraph text.
   ────────────────────────────────────────────────────────────────── */

/* Fonts served locally for the map. */

:root {
  /* ── 1. CORE PALETTE — five solid values, no others ────────────── */
  --eqx-teal:   #A7C9CF;  /* accent unique · slash · ponctuation active */
  --eqx-ink:    #0E0E0E;  /* charbon — never use #000 */
  --eqx-ivory:  #F4ECDC;  /* warm default surface */
  --eqx-paper:  #FFFFFF;  /* strict-web surface */
  --eqx-white:  #FFFFFF;  /* on-dark text */

  /* ── 2. SURFACES (semantic) ────────────────────────────────────── */
  --eqx-surface:        var(--eqx-ivory);   /* default */
  --eqx-surface-dark:   var(--eqx-ink);     /* covers, transitions */
  --eqx-surface-paper:  var(--eqx-paper);   /* formal/web */

  /* ── 3. INK-OPACITY SCALE — hierarchy without new hues ─────────── */
  /* On light (Ivory / Paper) — use as colors. */
  --eqx-fg:          var(--eqx-ink);        /* body */
  --eqx-fg-50:       rgba(14,14,14,0.50);   /* secondary / dim */
  --eqx-fg-30:       rgba(14,14,14,0.30);   /* tertiary */
  --eqx-border:      rgba(14,14,14,0.12);   /* default border */
  --eqx-border-thin: rgba(14,14,14,0.08);   /* hairline */
  --eqx-fill:        rgba(14,14,14,0.04);   /* card fill */
  --eqx-rule:        rgba(14,14,14,0.04);   /* separators */

  /* On dark (Ink) — use as colors. */
  --eqx-fg-on-dark:          var(--eqx-white);
  --eqx-fg-on-dark-50:       rgba(255,255,255,0.50);
  --eqx-fg-on-dark-30:       rgba(255,255,255,0.30);
  --eqx-border-on-dark:      rgba(255,255,255,0.18);
  --eqx-border-on-dark-thin: rgba(255,255,255,0.12);
  --eqx-fill-on-dark:        rgba(255,255,255,0.04);
  --eqx-rule-on-dark:        rgba(255,255,255,0.08);

  /* ── 4. CHART PALETTE — teal + ink opacities only ──────────────── */
  --eqx-chart-1: #A7C9CF;
  --eqx-chart-2: rgba(14,14,14,0.85);
  --eqx-chart-3: rgba(14,14,14,0.55);
  --eqx-chart-4: rgba(14,14,14,0.30);
  --eqx-chart-5: rgba(14,14,14,0.12);

  /* ── 5. TYPE FAMILIES — 4 roles, never crossed ─────────────────── */
  --eqx-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --eqx-font-body:    "Inter Tight", -apple-system, system-ui, sans-serif;
  --eqx-font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --eqx-font-caption: "DM Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ── 6. TYPE SCALE — slide-anchored (10" × 5.625" / 1280×720) ──── */
  --eqx-size-statement: 60pt;   /* hero / 48-60pt */
  --eqx-size-title:     32pt;   /* slide title */
  --eqx-size-title-sm:  24pt;   /* small slide title */
  --eqx-size-subtitle:  18pt;
  --eqx-size-body:      13pt;
  --eqx-size-body-sm:   12pt;
  --eqx-size-caption:   10pt;   /* DM Mono UPPERCASE 0.16-0.22em */

  /* Pixel scale (for screens, not slides). */
  --eqx-px-statement: 72px;
  --eqx-px-display:   56px;
  --eqx-px-h1:        40px;
  --eqx-px-h2:        28px;
  --eqx-px-h3:        20px;
  --eqx-px-body:      15px;
  --eqx-px-small:     13px;
  --eqx-px-caption:   11px;

  /* ── 7. LETTER-SPACING ─────────────────────────────────────────── */
  --eqx-tracking-wordmark: -0.02em;     /* /eqxia */
  --eqx-tracking-favicon:  -0.04em;     /* /e */
  --eqx-tracking-tight:    -0.02em;     /* large display */
  --eqx-tracking-display:  -0.01em;     /* h1, h2 */
  --eqx-tracking-caption:   0.18em;     /* DM Mono labels (0.16-0.22 range) */
  --eqx-tracking-label-lg:  0.22em;     /* widest UPPERCASE */
  --eqx-tracking-button:    0.06em;

  /* ── 8. SPACING — 4px base, ink-anchored ───────────────────────── */
  --eqx-sp-1:  4px;
  --eqx-sp-2:  8px;
  --eqx-sp-3:  12px;
  --eqx-sp-4:  16px;
  --eqx-sp-5:  24px;
  --eqx-sp-6:  32px;
  --eqx-sp-7:  48px;
  --eqx-sp-8:  64px;
  --eqx-sp-9:  96px;

  /* Slide margins (10" × 5.625") — minimum 0.5-0.6". */
  --eqx-slide-margin: 0.6in;

  /* ── 9. RADII — sharp, almost flat ─────────────────────────────── */
  --eqx-radius-0:    0px;     /* full bleed, mastheads */
  --eqx-radius-xs:   3px;     /* chip inner detail */
  --eqx-radius-sm:   4px;     /* badges */
  --eqx-radius-md:   6px;     /* buttons, inputs */
  --eqx-radius-lg:   8px;     /* cards (subtle) */
  --eqx-radius-xl:  10px;     /* download stations */
  --eqx-radius-pill: 999px;   /* chips, L4 */
  --eqx-radius-tile: 22%;     /* favicon tile (relative) */

  /* ── 10. ELEVATION — almost none. The system is flat. ──────────── */
  --eqx-shadow-none: none;
  --eqx-shadow-popover: 0 30px 60px -20px rgba(0,0,0,0.18);
  --eqx-shadow-popover-dark: 0 30px 60px -25px rgba(0,0,0,0.45);
  /* No drop shadow on cards. Borders + fills do all hierarchy. */

  /* ── 11. IMAGERY + OVERLAYS — option C: cover, section dividers,
        hero web, masthead newsletter. Always with an overlay. ──────── */
  --eqx-copper: #D4A574;  /* editorial accent · backgrounds + masthead moments ONLY */
  --eqx-overlay-ink:        linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.78) 100%);
  --eqx-overlay-ink-strong: linear-gradient(180deg, rgba(14,14,14,0.72) 0%, rgba(14,14,14,0.90) 100%);
  --eqx-overlay-ivory:      linear-gradient(180deg, rgba(244,236,220,0.55) 0%, rgba(244,236,220,0.82) 100%);

  /* ── 12. ANIMATION — sober, terminal ───────────────────────────── */
  --eqx-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --eqx-dur-fast:  120ms;
  --eqx-dur:       200ms;
  --eqx-dur-slow:  400ms;
  --eqx-cursor-blink: 1.05s;  /* terminal block cursor */

  /* ── 13. WORDMARK SIZES (px) ───────────────────────────────────── */
  --eqx-wordmark-lockup: 108px;  /* cover / hero */
  --eqx-wordmark-large:   72px;
  --eqx-wordmark-header:  40px;  /* 32–48 */
  --eqx-wordmark-inline:  20px;  /* 18–24 */
}

/* ──────────────────────────────────────────────────────────────────
   SEMANTIC CLASSES — role-bound. Apply these, don't restyle ad hoc.
   ────────────────────────────────────────────────────────────────── */

html, body {
  background: var(--eqx-surface);
  color: var(--eqx-fg);
  font-family: var(--eqx-font-body);
  font-size: var(--eqx-px-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Wordmark — the ONLY allowed form ──────────────────────────── */
.eqx-wordmark {
  font-family: var(--eqx-font-mono);
  font-weight: 500;
  letter-spacing: var(--eqx-tracking-wordmark);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: var(--eqx-ink);
}
.eqx-wordmark .slash { color: var(--eqx-teal); }
.eqx-wordmark.on-dark { color: var(--eqx-white); }

/* ── Slash-command (offer naming) ──────────────────────────────── */
.eqx-slashcmd {
  font-family: var(--eqx-font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--eqx-ink);
}
.eqx-slashcmd .slash { color: var(--eqx-teal); }
.eqx-slashcmd.on-dark { color: var(--eqx-white); }

/* ── Headings — UPPERCASE, no underline rule. Slides + screens. ── */
.eqx-h1, h1.eqx, .eqx-statement {
  font-family: var(--eqx-font-body);
  font-weight: 600;
  font-size: var(--eqx-px-display);
  letter-spacing: var(--eqx-tracking-tight);
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--eqx-ink);
  margin: 0;
}
.eqx-h2, h2.eqx {
  font-family: var(--eqx-font-body);
  font-weight: 600;
  font-size: var(--eqx-px-h1);
  letter-spacing: var(--eqx-tracking-display);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--eqx-ink);
  margin: 0;
}
.eqx-h3, h3.eqx {
  font-family: var(--eqx-font-body);
  font-weight: 500;
  font-size: var(--eqx-px-h2);
  letter-spacing: var(--eqx-tracking-display);
  line-height: 1.15;
  color: var(--eqx-ink);
  margin: 0;
}

/* ── Editorial pull-quote / masthead serif ─────────────────────── */
.eqx-quote, .eqx-masthead {
  font-family: var(--eqx-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--eqx-px-h1);
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--eqx-ink);
  /* The vertical teal rule belongs on the left edge of pull-quotes. */
  border-left: 2px solid var(--eqx-teal);
  padding-left: var(--eqx-sp-5);
  margin: 0;
}

/* ── Body ─────────────────────────────────────────────────────── */
.eqx-body, p.eqx {
  font-family: var(--eqx-font-body);
  font-weight: 400;
  font-size: var(--eqx-px-body);
  line-height: 1.6;
  color: var(--eqx-ink);
  text-wrap: pretty;
  margin: 0;
}
.eqx-dim   { color: var(--eqx-fg-50); }
.eqx-dim-2 { color: var(--eqx-fg-30); }

/* ── Caption / label — DM Mono UPPERCASE ──────────────────────── */
.eqx-caption, .eqx-label {
  font-family: var(--eqx-font-caption);
  font-weight: 500;
  font-size: var(--eqx-px-caption);
  text-transform: uppercase;
  letter-spacing: var(--eqx-tracking-caption);
  color: var(--eqx-fg-50);
}
.eqx-label--wide { letter-spacing: var(--eqx-tracking-label-lg); }

/* ── Code / mono UI ────────────────────────────────────────────── */
.eqx-code, code.eqx {
  font-family: var(--eqx-font-mono);
  font-weight: 500;
  font-size: 0.94em;
  letter-spacing: 0;
  color: var(--eqx-ink);
  background: var(--eqx-fill);
  padding: 2px 6px;
  border-radius: var(--eqx-radius-sm);
}

/* ── Dark-surface mirrors ─────────────────────────────────────── */
.eqx-on-dark {
  background: var(--eqx-surface-dark);
  color: var(--eqx-white);
}
.eqx-on-dark .eqx-body,
.eqx-on-dark p.eqx,
.eqx-on-dark .eqx-h1,
.eqx-on-dark .eqx-h2,
.eqx-on-dark .eqx-h3,
.eqx-on-dark .eqx-quote { color: var(--eqx-white); }
.eqx-on-dark .eqx-dim   { color: var(--eqx-fg-on-dark-50); }
.eqx-on-dark .eqx-caption,
.eqx-on-dark .eqx-label { color: var(--eqx-fg-on-dark-50); }
.eqx-on-dark .eqx-code  { background: var(--eqx-fill-on-dark); color: var(--eqx-white); }