/* ============================================================
   Clare Digital brand tokens: "The Instrument"
   Locked 2026-07-07 from Direction B (Round 2, lighter electric).
   Source of truth for values and usage rules: /brand/brand.yaml
   Usage: <link rel="stylesheet" href="/css/tokens.css">
   ============================================================ */

/* ---------- Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Variable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --paper: #F5F6F7;         /* page background, cool and matte */
  --card: #FFFFFF;          /* raised panels, article reading surface */
  --ink: #15171C;           /* graphite: all text, structural rules, ink buttons */
  --muted: #575D68;         /* secondary text, captions, labels */
  --electric: #4A63FE;      /* the needle: marks, bars, CTA fill, large elements */
  --electric-text: #3D5AFE; /* text-safe electric: prose links, small mono numbers */
  --electric-deep: #2740D6; /* hover states */
  --electric-ondark: #8CA2FF; /* accent on dark surfaces */
  --lime: #B6F400;          /* acid spark: numbers + chart moments, dark surfaces ONLY */
  --carbon: #0F1115;        /* dark surfaces: footer, OG images */
  --ondark: #E9EBEE;        /* text on dark */
  --ondark-muted: #9BA1AC;  /* secondary text on dark */
  --line: #DDE0E4;          /* hairlines on light */
  --line-dark: #2A2E36;     /* hairlines on dark */

  /* type */
  --sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* type scale (desktop / see brand.yaml for mobile) */
  --fs-display: 64px;   /* hero H1, Archivo 680, ls -0.03em, lh 1.02 */
  --fs-h1: 44px;        /* page H1, Archivo 660, ls -0.025em, lh 1.05 */
  --fs-h2: 33px;        /* section/article H2, Archivo 660, ls -0.02em, lh 1.15 */
  --fs-h3: 21px;        /* card titles, Archivo 640, ls -0.01em, lh 1.35 */
  --fs-body: 17px;      /* body, Archivo 400, lh 1.72..1.75 */
  --fs-small: 13.5px;   /* captions, Archivo 400, lh 1.5 */
  --fs-label: 11px;     /* mono labels, JetBrains Mono 500, caps, ls 0.14em */

  /* spacing scale (px) */
  --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 */
  --r-btn: 4px;    /* buttons, small chips */
  --r-card: 6px;   /* cards, swatches, cells */
  --r-panel: 8px;  /* large panels, mock frames */

  /* measure */
  --measure: 64ch;         /* max body text width */
  --wrap-max: 1060px;      /* page container */
}

/* ---------- Base elements ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); margin: 0 0 0.5em; }
h1 { font-weight: 660; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-weight: 660; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-weight: 640; font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0 0 1.2em; max-width: var(--measure); }
a { color: var(--electric-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--electric-deep); text-decoration-thickness: 2px; }

/* ---------- Components ---------- */
/* Buttons: 15px Archivo 600, 15px/26px padding, radius 4px, 1px transparent
   border reserved so ghost/primary align. Primary = electric fill + white
   text (4.7:1). Ink = graphite fill. Ghost = 1px ink border, fills on hover
   only via border color shift. Disabled = opacity .45, no pointer. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--sans); letter-spacing: 0.01em;
  padding: 15px 26px; border-radius: var(--r-btn);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--electric); color: #FFFFFF; }
.btn-primary:hover { background: var(--electric-deep); }
.btn-ink { background: var(--ink); color: #FFFFFF; }
.btn-ink:hover { background: var(--carbon); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--electric-text); color: var(--electric-text); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Text link (standalone, outside prose) */
.textlink { color: var(--electric-text); font: 500 15.5px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--electric-deep); }

/* Nav link */
.navlink { font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; }
.navlink:hover { color: var(--electric-text); }
.navlink.active { color: var(--electric-text); box-shadow: 0 2px 0 var(--electric); padding-bottom: 3px; }

/* ---------- Signature motifs ---------- */
/* The index line: mono number, 40px hairline, mono caps label.
   Opens sections, eyebrows, article metadata. Number is electric-text. */
.index-line { display: flex; align-items: center; gap: 12px; }
.index-line .n { font: 500 var(--fs-label)/1 var(--mono); color: var(--electric-text); letter-spacing: 0.08em; }
.index-line .l { flex: 0 0 40px; height: 1px; background: var(--ink); }
.index-line .t { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* The needle: 3px electric bar marking the claim worth reading twice. */
.needle { border-left: 3px solid var(--electric); padding: 4px 0 4px 18px; margin: 28px 0; }
.needle .k { font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--electric-text); display: block; margin-bottom: 6px; }
.needle .v { font: 640 21px/1.35 var(--sans); letter-spacing: -0.01em; }

/* The readout: dark strip for the numbers that matter. Lime lives here and
   nowhere else. Never on light surfaces, never prose. */
.readout { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; background: var(--carbon); border-radius: var(--r-btn); padding: 20px 26px; }
.readout .k { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ondark-muted); display: block; margin-bottom: 7px; }
.readout .v { font: 600 22px/1 var(--mono); color: var(--lime); }