/* =========================================================
   BREAKFAST TEXT — design tokens
   A modern British-Teletext-inspired information system.
   Not a Ceefax clone: an original Breakfast visual identity
   built on the same colour language and information density.
   ========================================================= */

@font-face {
  font-family: "Pixel Operator Mono";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/pixel-operator-mono-bold.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("JetBrains Mono"), url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
  /* ---------- Teletext colour language ---------- */
  --tt-black:   #000000;   /* transmitted black */
  --tt-panel:   #000000;   /* Teletext has no raised surfaces */
  --tt-white:   #ffffff;   /* primary copy */
  --tt-yellow:  #ffff00;   /* headings / attention */
  --tt-cyan:    #00ffff;   /* navigation / links */
  --tt-green:   #00ff00;   /* positive / live / status */
  --tt-red:     #ff0000;   /* back / warning */
  --tt-blue:    #0000ff;   /* structural header bands */
  --tt-magenta: #ff00ff;   /* occasional accent */
  --tt-grey:    #9296a0;   /* meta/timestamps only — never body copy */
  --tt-body:    #d7dae0;   /* body copy — bright, not faded */

  /* Semantic aliases so shared partials/blocks keep working under the new
     system without every selector needing a rewrite. */
  --primary:   var(--tt-yellow);
  --secondary: var(--tt-cyan);
  --success:   var(--tt-green);
  --danger:    var(--tt-red);
  --surface:   var(--tt-panel);
  --text:      var(--tt-white);
  --muted:     var(--tt-body);
  --bg:        var(--tt-black);
  --bg-alt:    var(--tt-panel);
  --white:     var(--tt-white);
  --ink:       var(--tt-black);

  --font: "Pixel Operator Mono", "JetBrains Mono", ui-monospace, monospace;
  --mono: "Pixel Operator Mono", "JetBrains Mono", ui-monospace, monospace;
  --hand: var(--font);

  /* Spacing follows a tight "character cell" rhythm — Teletext is a dense
     information grid, not a magazine layout with generous air. Sections
     stack close enough that several "pages" are visible per scroll. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 20px; --s-8: 28px; --s-12: 36px; --s-16: 44px;
  --s-20: clamp(1.75rem, 3vw, 2.5rem);
  --s-24: clamp(2rem, 3.5vw, 3rem);

  /* A loose 40-column rhythm: labels, numbers and metadata align to this
     unit rather than filling arbitrary space. */
  --tt-col: 1.6ch;

  /* Hard, flat borders. No radius, no soft shadow — solid colour blocks. */
  --border: 2px solid var(--tt-white);
  --border-3: 2px solid var(--tt-white);
  --radius: 0;
  --radius-sm: 0;
  --radius-pill: 0;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  --maxw: 640px;
  --maxw-prose: 608px;
  --header-h: 40px;

  --z-header: 100;
  --z-sticky: 200;
  --z-skip: 1200;

  --motion: 0.1s linear;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.08s;
  --dur-mid: 0.16s;
  --dur-reveal: 0.18s;
  --stagger: 18ms;
}

/* prefers-reduced-motion is handled once, globally, in components.css. */