/* ==========================================================================
   TOKENS.CSS — the EddyReady design system's shared values
   ==========================================================================

   WHAT IS THIS FILE, IN PLAIN TERMS?
   -----------------------------------
   A "design token" is just a named value — a color, a font size, a spacing
   amount — stored once so every page can reuse the same value instead of
   retyping it. In CSS these are called "custom properties" (a.k.a. CSS
   variables) and look like `--this-name: value;`.

   You define them once here, inside `:root` (which means "the whole page"),
   and then anywhere else in your CSS you can write `var(--this-name)`
   instead of the raw value. Two big benefits for a beginner:
     1. You only have to change a color/size in ONE place to update the
        whole site.
     2. It matches the values already decided in
        "EddyReady Design System/tokens/" — so if Eddy's designer hands you
        more pages later, they'll look consistent with this one.

   This file is a trimmed, single-file copy of that design system's token
   files (colors.css, typography.css, spacing.css, radii.css, motion.css,
   elevation.css, base.css) with extra beginner comments. Nothing here is
   invented — every value is copied from that source folder.

   You should NOT need to edit this file often. Page-specific styling
   (layout, the countdown box, the button, etc.) lives in `style.css`
   instead — keep that separation as the site grows.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FONTS
   Plus Jakarta Sans is the typeface used everywhere (headings, body, UI).
   JetBrains Mono is used ONLY for numbers/technical detail — on this page,
   that's the countdown digits. Both are loaded free from Google Fonts.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {

  /* ------------------------------------------------------------------------
     COLOR — "Ink" scale (near-black neutrals the whole site sits on)
     ------------------------------------------------------------------------ */
  --ink-1000:#070707; --ink-950:#0B0B0B; --ink-900:#101010; --ink-850:#151515;
  --ink-800:#1A1A1A;  --ink-700:#212121; --ink-600:#2A2A2A; --ink-500:#333333;
  --ink-400:#4A4A4A;  --ink-300:#6E6E6E; --ink-200:#9B9B9B; --ink-100:#C9C9C9;
  --ink-050:#E6E6E6;  --ink-000:#FFFFFF;

  /* COLOR — "Pine" is the ONE brand accent color (a deep green), used for
     buttons, links and highlighted words. It matches the real EddyReady
     logo green almost exactly (#016740 in the logo file vs #00674F here). */
  --pine-700:#004635; --pine-600:#005741; --pine-500:#00674F; --pine-400:#0A8467;
  --pine-300:#4FB198; --pine-200:#A8DCCC; --pine-100:#E2F2ED;

  /* COLOR — status colors exist for later (e.g. form errors) but are not
     used for decoration anywhere on this page. */
  --leaf-500:#3FA96B; --amber-500:#E8A32A; --rose-500:#E0533D;

  /* COLOR — "semantic" names: instead of styling with raw colors like
     `var(--ink-950)` everywhere, we say what the color is FOR. This is the
     layer you'll actually use in style.css. */
  --bg-page:var(--ink-950);           /* the page background */
  --bg-surface:var(--ink-900);
  --bg-raised:var(--ink-850);
  --bg-card:var(--ink-800);           /* background for boxed elements, e.g. the countdown cells */
  --bg-inset:var(--ink-1000);
  --bg-accent:var(--pine-500);        /* solid brand-green fill (buttons) */
  --bg-accent-hover:var(--pine-400);
  --bg-accent-press:var(--pine-600);
  --bg-ghost-hover:rgba(255,255,255,.06);

  --text-primary:var(--ink-000);      /* headline white */
  --text-body:var(--ink-100);         /* paragraph text */
  --text-muted:var(--ink-200);        /* captions / secondary text */
  --text-faint:var(--ink-300);
  --text-accent:var(--pine-300);      /* pine text on a dark background — pine-500 is
                                          too dark to read as text, so pine-300 is used
                                          instead whenever green TEXT is needed */
  --text-on-accent:#FFFFFF;           /* text color placed ON TOP of a pine fill */

  --border-hairline:rgba(255,255,255,.07);
  --border-subtle:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --border-accent:var(--pine-400);

  --focus-ring:var(--pine-400);       /* the outline shown when tabbing with a keyboard */

  /* A top "sheen" available for raised cards/panels later */
  --grad-card-top:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);


  /* ------------------------------------------------------------------------
     TYPE — fonts, sizes, line-heights, weights, letter-spacing
     ------------------------------------------------------------------------ */
  --font-display:"Plus Jakarta Sans","Helvetica Neue",Helvetica,sans-serif;
  --font-body:"Plus Jakarta Sans","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* Sizes below are the design system's desktop values (a 1440px-wide
     canvas). style.css scales these DOWN for small phones with a
     media query — see "RESPONSIVE TYPE" in style.css. */
  --fs-display-1:112px; --fs-display-2:76px; --fs-display-3:56px;
  --fs-h1:44px; --fs-h2:34px; --fs-h3:26px; --fs-h4:20px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px; --fs-micro:11px;

  --lh-tight:0.94; --lh-display:1.04; --lh-heading:1.16; --lh-body:1.6; --lh-relaxed:1.75;

  --fw-thin:200; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Letter-spacing ("tracking"). The logo's wordmark is set very wide
     (0.22em) — that value is reserved for the wordmark only. */
  --tr-wordmark:0.22em; --tr-eyebrow:0.16em; --tr-label:0.06em; --tr-normal:0em; --tr-display:-0.03em;


  /* ------------------------------------------------------------------------
     SPACING — a fixed scale, so gaps/padding stay consistent and rhythmic
     instead of ad-hoc pixel values everywhere.
     ------------------------------------------------------------------------ */
  --space-0:0px;  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10:64px; --space-11:80px; --space-12:104px; --space-13:136px; --space-14:180px;

  --gutter:24px;
  --pad-card:24px; --pad-card-lg:32px; --pad-control-x:22px; --pad-control-y:13px;
  --section-y:104px; --section-y-lg:136px;
  --page-max:1200px; /* the widest the main content column ever gets, on big screens */


  /* ------------------------------------------------------------------------
     SHAPE — corner rounding
     ------------------------------------------------------------------------ */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --radius-card:20px; --radius-pill:999px; /* 999px = "as round as possible", used for pill buttons */
  --border-w:1px;


  /* ------------------------------------------------------------------------
     SHADOW
     ------------------------------------------------------------------------ */
  --shadow-card:0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-raised:0 24px 60px -20px rgba(0,0,0,.8); /* bigger, softer shadow for things that float above the page, like the birthday pop-up */
  --shadow-accent:0 14px 34px -14px rgba(0,103,79,.55); /* the green glow under the primary button */


  /* ------------------------------------------------------------------------
     MOTION — animation durations & easing curves, so hovers/transitions
     feel the same everywhere instead of each being hand-tuned.
     ------------------------------------------------------------------------ */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --press-scale:0.97; /* how much a button shrinks when clicked/tapped */
}

/* Respect visitors who've asked their OS for reduced motion (accessibility) —
   this instantly makes all animations/transitions on the page snap instead
   of easing, system-wide, just by zeroing the duration tokens above. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}


/* ==========================================================================
   BASE RESET — small global defaults every browser needs nudged into line
   ========================================================================== */

/* Makes width/height calculations include padding+border, which is far more
   predictable than the browser default. This one rule prevents a LOT of
   "why is this box bigger than I expected" confusion for beginners. */
*, *::before, *::after { box-sizing: border-box; }

/* Remove the tiny default margins browsers put on <body>, <h1>, <p> — we'll
   set spacing on purpose in style.css instead of fighting invisible defaults. */
body, h1, p { margin: 0; }

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; /* smoother text rendering on Mac/iOS */
}

h1 {
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: var(--tr-display);
}

a { color: var(--text-accent); text-decoration: none; }

/* Highlight color when a visitor selects/drags over text on the page */
::selection { background: var(--pine-500); color: var(--text-on-accent); }

/* The outline shown when navigating with a keyboard (Tab key) — important
   for accessibility, do not remove without replacing it with something. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }