/* OOO Forever — Design Tokens
   Inspired vibe: irreverent · humorous · painkiller
   Audience: burnt-out founders + agency owners
*/

:root {
  /* ---------- COLOR ---------- */
  /* Greens */
  --green-900: #07211a;   /* deepest, near-black green */
  --green-800: #0f3d2e;   /* primary dark green — base brand */
  --green-700: #16523e;
  --green-600: #1d6a50;
  --green-500: #2a8463;
  --green-400: #58a883;
  --green-300: #8ec9ad;
  --green-200: #c0e3d2;
  --green-100: #e2f1e8;

  /* Fluro */
  --fluro: #a8ff00;            /* primary highlight */
  --fluro-bright: #c6ff3d;     /* hover/lift */
  --fluro-deep: #7cc400;       /* pressed / on cream */
  --fluro-glow: #a8ff0033;     /* 20% alpha for glows */

  /* Cream / neutral */
  --cream: #f4eedf;            /* warm off-white — primary bg on light */
  --cream-soft: #faf6ea;
  --cream-deep: #e8dfc7;
  --paper: #fbf8ee;

  /* Ink (text) */
  --ink: #0a1d16;
  --ink-soft: #2a3b32;
  --ink-mute: #5a6b62;
  --ink-faint: #8a9a91;

  /* Functional */
  --tomato: #ff5b3d;           /* cheeky alert / "do not disturb" red */
  --sun: #ffd23d;              /* sunny accent for sticker fills */
  --sky: #6fb7e8;              /* secondary illo accent */
  --lilac: #c8a8ff;

  /* Surfaces */
  --bg: var(--cream);
  --bg-deep: var(--green-800);
  --surface: var(--paper);
  --surface-raised: #ffffff;
  --line: #1d2b22;             /* chunky outline color */

  /* ---------- TYPE ---------- */
  --font-display: "Fraunces", "Recoleta", Georgia, serif;
  --font-sans: "Geist", "Inter Tight", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-script: "Caveat", "Patrick Hand", cursive;

  /* Type scale (1.25 modular, generous display) */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 36px;
  --t-3xl: 48px;
  --t-4xl: 64px;
  --t-5xl: 88px;
  --t-6xl: 120px;
  --t-7xl: 160px;

  --leading-tight: 0.95;
  --leading-snug: 1.1;
  --leading-normal: 1.45;
  --leading-loose: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-mono: 0.02em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;
  --r-blob: 62% 38% 54% 46% / 48% 56% 44% 52%;

  /* ---------- SHADOWS / STICKER ---------- */
  /* Hard sticker offset shadow — the signature lift */
  --sticker-1: 3px 3px 0 0 var(--line);
  --sticker-2: 5px 5px 0 0 var(--line);
  --sticker-3: 8px 8px 0 0 var(--line);
  --sticker-fluro: 5px 5px 0 0 var(--fluro);
  --sticker-cream: 5px 5px 0 0 var(--cream-deep);

  /* Soft shadows for layered cards */
  --shadow-sm: 0 1px 2px rgba(7, 33, 26, 0.08), 0 2px 8px rgba(7, 33, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(7, 33, 26, 0.10), 0 12px 32px rgba(7, 33, 26, 0.08);
  --shadow-lg: 0 12px 40px rgba(7, 33, 26, 0.18);

  /* Glow */
  --glow-fluro: 0 0 0 6px var(--fluro-glow);

  /* ---------- BORDERS ---------- */
  --stroke-1: 1.5px;
  --stroke-2: 2.5px;
  --stroke-3: 4px;     /* the "chunky outline" */
  --stroke-4: 6px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.2,1);
  --ease-bounce: cubic-bezier(.5, 1.6, .4, .9);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-wide: 1360px;
}

/* ---------- BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* Utilities */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--s-5); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--s-5); }
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.script { font-family: var(--font-script); font-weight: 700; }
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}