/* =========================================================
   FollowDon — Design Tokens
   Three theme variants. Default = Editorial Monochrome.
   Switch with [data-theme="warm"] or [data-theme="techno"]
   ========================================================= */

@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Type families — Bebas Neue + Roboto Condensed are the brand faces. */
  --ff-display: "Bebas Neue", "Archivo Black", Impact, system-ui, sans-serif;
  --ff-display-condensed: "Bebas Neue", "Roboto Condensed", Impact, sans-serif;
  --ff-body: "Roboto Condensed", "Inter Tight", system-ui, sans-serif;
  --ff-serif: "Fraunces", "Times New Roman", serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — modular 1.25 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Spacing — 4pt grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii — squared by default */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ============================
     Theme: EDITORIAL MONOCHROME (default)
     Credible. Magazine-like. The logo DNA.
     ============================ */

  --ink: #0a0a0a;          /* near-black */
  --ink-2: #1a1a1a;
  --ink-3: #3a3a3a;
  --ink-4: #6b6b6b;
  --ink-5: #9a9a9a;
  --rule: #d9d6ce;         /* hairline */
  --paper: #efece3;        /* bone / off-white */
  --paper-2: #e5e2d8;
  --white: #ffffff;

  --accent: #0a0a0a;       /* no accent — mono */
  --accent-on: #efece3;
  --highlight: #f4e83c;    /* marker yellow, used sparingly */

  --bg: var(--paper);
  --surface: var(--white);
  --fg: var(--ink);
  --muted: var(--ink-4);
  --border: var(--rule);

  --shadow-1: 0 1px 0 0 rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-2: 0 2px 8px rgba(10,10,10,0.06), 0 8px 24px rgba(10,10,10,0.05);
  --shadow-3: 0 12px 32px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.05);

  --ring: 0 0 0 3px rgba(10,10,10,0.15);
}

[data-theme="warm"] {
  /* ============================
     Theme: WARM APPROACHABLE
     Teacher energy. Sun. Clay. Friendly.
     ============================ */
  --ink: #1a1410;
  --ink-2: #2b2218;
  --ink-3: #4d3f30;
  --ink-4: #7a6a56;
  --ink-5: #a79478;
  --rule: #e8dfd0;
  --paper: #f7f1e6;
  --paper-2: #ede4d1;
  --white: #fffdf7;

  --accent: #c44a1a;        /* terracotta */
  --accent-on: #fffdf7;
  --highlight: #f2c14e;     /* ochre */

  --bg: var(--paper);
  --surface: var(--white);
  --fg: var(--ink);
  --muted: var(--ink-4);
  --border: var(--rule);

  --shadow-1: 0 1px 0 0 rgba(26,20,16,0.06), 0 1px 2px rgba(26,20,16,0.04);
  --shadow-2: 0 2px 10px rgba(26,20,16,0.07), 0 10px 28px rgba(26,20,16,0.06);
  --shadow-3: 0 14px 36px rgba(26,20,16,0.12), 0 3px 8px rgba(26,20,16,0.06);

  --ring: 0 0 0 3px rgba(196,74,26,0.28);

  --ff-serif: "Fraunces", "Georgia", serif;
  /* warm leans into serif display + sans body */
}

[data-theme="techno"] {
  /* ============================
     Theme: TECHNO-OPTIMIST
     Living with Super Intelligence. Dark-first. Electric.
     ============================ */
  --ink: #f3f0e8;           /* inverted — "ink" means high-contrast fg */
  --ink-2: #d9d5cb;
  --ink-3: #a8a296;
  --ink-4: #6b6759;
  --ink-5: #3f3c33;
  --rule: #242218;
  --paper: #0b0b0a;         /* near-black */
  --paper-2: #15140f;
  --white: #1c1b15;         /* "surface" in dark mode */

  --accent: #c7ff3f;        /* electric lime */
  --accent-on: #0b0b0a;
  --highlight: #ff5b2e;     /* heat */

  --bg: var(--paper);
  --surface: var(--paper-2);
  --fg: var(--ink);
  --muted: var(--ink-3);
  --border: var(--rule);

  --shadow-1: 0 1px 0 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 12px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.4);
  --shadow-3: 0 18px 42px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.4);

  --ring: 0 0 0 3px rgba(199,255,63,0.35);

  --ff-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fd-display {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  letter-spacing: 0.005em;
  line-height: 0.9;
  text-transform: uppercase;
}
.fd-serif {
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.fd-mono {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.fd-eyebrow {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fd-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}