/* =====================================================================
   TINYBOTS — DESIGN TOKENS  (tokens.css)
   The single source of truth for colour, type, spacing, radius, motion.
   Import once, globally:  @import "tokens.css";
   Fonts load from Google Fonts (see fonts block below) — self-host later
   if you want zero third-party requests.
   ===================================================================== */

/* ---- Fonts (Google Fonts) ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Core palette: "coffee → bourbon" -------------------------- */
  --news:    #F4EBDB;   /* newsprint — primary background        */
  --news-2:  #EFE1C9;   /* deeper cream — panels / surfaces       */
  --sand:    #F7E3C4;   /* soft fills, callout cards              */
  --ink:     #241B16;   /* espresso — primary text & 2px borders  */
  --ink-2:   #4A3A30;   /* secondary text                         */
  --ink-3:   #6E6056;   /* muted / captions                       */
  --evening: #1B1410;   /* late-night — deep sections, footer     */
  --spruce:  #1E7A70;   /* lead accent — THE WINK                 */
  --spruce-d:#155F57;   /* spruce, pressed/darker                 */
  --persimmon:#EE6240;  /* energy — focus dot, primary CTA        */
  --marigold:#F3A82A;   /* warmth — highlights, sun, reversed wink*/
  --bourbon: #8A3E1C;   /* depth — eyebrows, evening accents      */
  --line:    #E2D4BC;   /* hairline dividers on cream             */

  /* ---- Semantic aliases ----------------------------------------- */
  --bg: var(--news);
  --surface: var(--news-2);
  --text: var(--ink);
  --muted: var(--ink-2);
  --accent: var(--spruce);
  --energy: var(--persimmon);
  --highlight: var(--marigold);
  --depth: var(--bourbon);

  /* ---- Type families -------------------------------------------- */
  --font-display:  "DM Sans", system-ui, sans-serif;    /* headlines, wordmark, UI titles */
  --font-editorial:"Fraunces", Georgia, serif;          /* italic pull-quotes, taglines   */
  --font-body:     "Inter", system-ui, sans-serif;      /* prose, UI                      */
  --font-mono:     "JetBrains Mono", ui-monospace, monospace; /* labels, code, datelines  */

  /* ---- Type scale (fluid) --------------------------------------- */
  --fs-display: clamp(42px, 6.4vw, 72px);
  --fs-h1:      clamp(34px, 4.6vw, 52px);
  --fs-h2:      clamp(26px, 3.4vw, 40px);
  --fs-h3:      20px;
  --fs-body:    17px;
  --fs-sm:      14px;
  --fs-label:   11px;          /* mono eyebrows / captions */

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-body:  1.62;
  --tracking-tight: -0.03em;   /* display / headlines */
  --tracking-wordmark: -0.035em;
  --tracking-label: 0.18em;    /* mono uppercase labels */

  /* ---- Spacing scale -------------------------------------------- */
  --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 36px; --sp-6: 48px; --sp-7: 64px; --sp-8: 80px;
  --section-y: clamp(56px, 8vw, 88px);

  /* ---- Radius --------------------------------------------------- */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 26px; --r-pill: 999px;

  /* ---- Borders & shadows (signature: 2px ink + hard offset) ----- */
  --bd: 2px solid var(--ink);
  --shadow-btn:  0 5px 0 var(--ink);
  --shadow-btn-h:0 7px 0 var(--ink);
  --shadow-card: 0 16px 40px -22px rgba(36,27,22,.5);

  /* ---- Layout --------------------------------------------------- */
  --maxw: 1140px;
  --gutter: 30px;

  /* ---- Motion --------------------------------------------------- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --wink-dur: .52s;
  --wink-interval: 6.4s;

  /* ---- The wink, locked ----------------------------------------- */
  --wink-o-size: 0.58em;   /* size of the o inside the wordmark */
}

/* Optional dark surface helper for evening sections */
.on-evening{ --text:#F7E3C4; --muted:rgba(247,227,196,.78); --bg:var(--evening); --line:rgba(247,227,196,.14); }