/* Chawso design tokens v1 — 2026-11-12
   One accent, many products. Products differ by name and content, not colour.
   Fonts are open-licence (OFL): self-host, no CDN, no tracking. */

@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* dark surfaces (default) */
  --ink-950: #0B0D11;   /* page background */
  --ink-900: #10141B;   /* panel */
  --ink-850: #141923;   /* raised panel */
  --ink-800: #1A212C;   /* hover / inset */
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);

  /* light surfaces */
  --paper:   #F6F4EF;
  --paper-2: #FFFEFB;
  --line-light: rgba(16,20,27,.14);

  /* text */
  --text-hi:  #F4F6F8;  /* on dark: 17.9:1 */
  --text-mid: #A6AEB9;  /* on dark: 8.7:1 */
  --text-low: #87909C;
  --text-ink:     #14181F;  /* on paper: 16.2:1 */
  --text-ink-mid: #4E5661;  /* on paper: 6.8:1 */

  /* accent */
  --volt:      #D6FF3F;          /* fills, key highlights on dark (16.9:1 on ink-950) */
  --volt-soft: rgba(214,255,63,.13);
  --volt-ink:  #4A6400;          /* volt for text on light backgrounds (6.1:1 on paper) */
  --on-volt:   #10140A;          /* text on volt fills */

  /* status */
  --ok:      #58D68D;
  --warn:    #FFB020;
  --danger:  #FF6B5C;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --space-section: clamp(72px, 11vw, 128px);
  --wrap: 1120px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--volt);
}
.eyebrow--light { color: var(--volt-ink); }