/* ============================================================================
   BAD WOLF — Colors & Type tokens
   Single-accent modernist system. Cool greys + amber (wolf-eye yellow).
   ============================================================================ */

/* Self-hosted variable fonts. Single file per family covers all weights.
   Lives in /fonts/ at the project root so iframes and offline-first work
   without external CDN access. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Core palette (cool greys) ----------------------------------------- */
  --ink:        #161619;   /* near-black; primary text + UI */
  --ink-2:      #2D2D30;   /* secondary text */
  --ink-3:      #6A6A6E;   /* tertiary / meta */
  --ink-4:      #A8A8AC;   /* disabled / hairline-on-paper */
  --paper:      #ECECE9;   /* cool off-white; canvas */
  --paper-2:    #E1E1DE;   /* secondary surface (cards on paper) */
  --bone:       #D7D7D4;   /* dividers / quiet fills */
  --white:      #FAFAF8;   /* elevated surface */
  --black:      #000000;   /* hero contrast */

  /* -- The Accent (wolf-eye amber) --------------------------------------- */
  --amber:      #F2B81C;   /* the ONE color. confident, calming yellow. */
  --amber-deep: #B07E00;   /* legible variant for text/icons on light. */
  --amber-soft: #FAEAB0;   /* whisper of accent for tinted surfaces */

  /* -- Semantic (use sparingly; favor ink + amber) ----------------------- */
  --fg-1:       var(--ink);
  --fg-2:       var(--ink-2);
  --fg-3:       var(--ink-3);
  --fg-disabled:var(--ink-4);
  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-elev:    var(--white);
  --bg-invert:  var(--ink);
  --fg-invert:  var(--paper);
  --accent:     var(--amber);
  --hairline:   #16161914;       /* 8% ink */
  --rule:       var(--ink);      /* heavy hairline */
  --focus:      var(--amber);    /* attention, not alarm */
  --success-ink:var(--ink);      /* success uses ink + ✓ glyph, not green */

  /* -- Type families ----------------------------------------------------- */
  --font-sans:    'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* -- Type scale (the "big callout figures" come from 300 at huge sizes) - */
  --fz-mega:     128px;   /* day-counters, hero kills */
  --fz-display:  88px;
  --fz-h1:       56px;
  --fz-h2:       40px;
  --fz-h3:       28px;
  --fz-h4:       20px;
  --fz-lg:       18px;
  --fz-md:       16px;
  --fz-sm:       14px;
  --fz-xs:       12px;
  --fz-micro:    11px;    /* eyebrow / tracked labels */

  /* -- Type tracking (modernist: tight display, generous labels) --------- */
  --tr-display:  -0.03em;
  --tr-heading:  -0.02em;
  --tr-body:     -0.005em;
  --tr-label:    0.14em;   /* uppercase eyebrows */
  --tr-button:   0.08em;

  --lh-display:  0.92;
  --lh-heading:  1.05;
  --lh-body:     1.45;
  --lh-tight:    1.15;

  /* -- Spacing scale (4-px base, chunky steps) --------------------------- */
  --sp-0:  0;
  --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;
  --sp-10: 128px;

  /* -- Radii (chunky, never pill except for tags) ------------------------ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* -- Borders (modernist = decisive, often 2px) ------------------------- */
  --bw-hair: 1px;
  --bw:      2px;
  --bw-bold: 3px;

  /* -- Shadow system (low and sharp; we do NOT do floating glow) --------- */
  --sh-1:    0 1px 0 0 var(--ink);                              /* underline hit */
  --sh-2:    2px 2px 0 0 var(--ink);                            /* offset block */
  --sh-3:    4px 4px 0 0 var(--ink);                            /* hero card */
  --sh-soft: 0 8px 24px -12px #0F0F0E33;                        /* rare; menus only */
  --sh-inset:inset 0 0 0 2px var(--ink);

  /* -- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.6, 0, .8, .2);
  --ease-snap:  cubic-bezier(.2, 1.2, .3, 1);   /* tiny overshoot */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* -- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --gutter:    var(--sp-5);
}

/* ============================================================================
   Element defaults
   ============================================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fz-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fz-h1);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fz-h2);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fz-h3);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fz-h4);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-tight);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

/* The signature "big callout figure" — used for streak counts, prices, ages */
.figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fz-mega);
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.figure--display { font-size: var(--fz-display); }
.figure--h1      { font-size: var(--fz-h1); }

/* The signature "eyebrow" label — tracked uppercase */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fz-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow--ink   { color: var(--fg-1); }
.eyebrow--amber { color: var(--amber-deep); }

/* Code / data */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'tnum' 1;
}

/* Body sizes */
.body-lg { font-size: var(--fz-lg); line-height: var(--lh-body); }
.body    { font-size: var(--fz-md); line-height: var(--lh-body); }
.body-sm { font-size: var(--fz-sm); line-height: var(--lh-body); }
.meta    { font-size: var(--fz-xs); color: var(--fg-3); }

/* Inverted (on dark) */
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .eyebrow { color: var(--ink-4); }