/* ==========================================================================
   TAT YO GRANDMA — DESIGN TOKENS
   Phase 3 design system, implemented exactly. Single source of truth for
   every later phase. Per-page <style> blocks and per-game font imports
   are retired; this file is the only token authority.
   --------------------------------------------------------------------------
   PLACEMENT RULES (hard lint):
   - --muted is approved ON DARK SURFACES ONLY. On --paper/--white use
     --ink-60 / --ink-40 instead. Never pair --muted with a light background.
   - --accent never carries small white text. Small-size white-text fills
     (buttons, pills, tags, badges) use --accent-deep.
   - Orange appears only in: primary CTA fills, active-nav indication,
     progress fills, important highlights. Purple only in: brand mark,
     arcade identity, the single Design Lab accent card, subtle dark washes.
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* ---- 1.1 Neutral base ---- */
  --ink:          #0B0B0C;   /* Ink Black — dark page base, text on light */
  --ink-2:        #141416;   /* Soft Black — raised surfaces on dark */
  --ink-3:        #1D1D20;   /* Hairline-raised dark surface */
  --paper:        #F4F1EA;   /* Off White — light section base */
  --white:        #FFFFFF;   /* Pure White — cards on light, text on dark */
  --muted:        #94949A;   /* DARK SURFACES ONLY (6.65:1 on --ink) */
  --ink-60:       rgba(11, 11, 12, .60);  /* secondary text on light */
  --ink-40:       rgba(11, 11, 12, .40);  /* tertiary/hint text on light */
  --line:         rgba(11, 11, 12, .12);  /* hairline borders on light */
  --line-light:   rgba(255, 255, 255, .10); /* hairline borders on dark */

  /* ---- 1.2 Signature orange (approved roles only) ---- */
  --accent:             #F26A24;  /* large display text, progress, active nav, highlights */
  --accent-deep:        #CC4A0C; /* ALL small-size white-text fills: buttons, pills, tags (4.61:1) */
  --accent-hover:       #E05A14; /* hover state for accent fills */
  --accent-active:      #CC4A0C; /* pressed/active state */
  --accent-disabled-bg: rgba(242, 106, 36, .28);
  --accent-disabled-fg-dark:  rgba(255, 255, 255, .55);
  --accent-disabled-fg-light: #94949A;
  --accent-soft:        rgba(242, 106, 36, .12); /* tinted surfaces, select rings */
  --accent-ink:         #2A1503; /* dark text on orange-tinted surfaces */

  /* ---- 1.3 Deep purple (brand-identity touches only) ---- */
  --purple:       #5A168A;
  --purple-deep:  #2E0A49;
  --purple-glow:  #C084FC;   /* arcade secondary text on dark (7.57:1) */

  /* ---- 1.4 Semantic ---- */
  --ok:         #1E9E5A;
  --ok-deep:    #157A45;     /* white-text success fills (5.38:1) */
  --ok-bg:      #E4F4EB;
  --warn:       #9A6B00;     /* white on --warn = 4.69:1 */
  --warn-bg:    #FBF0D3;
  --danger:     #C62F2F;     /* white on --danger = 5.46:1 */
  --danger-bg:  #FBEAEA;
  --focus:      #0B6BE0;     /* :focus-visible ring (3:1 non-text indicator) */

  /* ---- 2. Typography (exactly 2 fonts) ---- */
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(4.5rem, 11vw, 6.5rem);  /* homepage H1 only */
  --fs-h2:      clamp(3rem, 7vw, 4rem);        /* section headings */
  --fs-h3:      clamp(1.5rem, 4vw, 1.875rem);  /* card headings */
  --fs-lede:    clamp(1.02rem, 2.4vw, 1.25rem);
  --fs-body-lg: 1.1875rem;                     /* 19px desktop emphasized body */
  --fs-body:    1.0625rem;                     /* 17px body base */
  --fs-small:   .875rem;                       /* 14px captions/meta */
  --fs-btn:     1rem;                           /* 16px, 700, uppercase labels */
  --fs-eyebrow: .78rem;                        /* kickers: 700, uppercase, ls .22em */

  --lh-hero:  .92;
  --lh-h2:    .95;
  --lh-h3:    1.05;
  --lh-lede:  1.55;
  --lh-body:  1.55;
  --lh-small: 1.5;
  --lh-btn:   1.2;

  /* ---- 3. Spacing (8px base unit, all multiples of 8) ---- */
  --s1:  8px;
  --s2:  16px;
  --s3:  24px;
  --s4:  32px;
  --s6:  48px;
  --s8:  64px;
  --s10: 80px;
  --s12: 96px;
  --s16: 128px;

  --max: 1280px;                       /* layout max-width (1440px abs ceiling) */
  --pad-x: clamp(48px, 5vw, 80px);     /* page padding, desktop */
  --section-y: clamp(96px, 10vw, 160px);/* section vertical rhythm, desktop */
  --gutter: 24px;

  /* ---- 4.2 Radius (16–28px family) ---- */
  --r-sm: 16px;   /* chips, tags, small wells */
  --r-md: 22px;   /* cards — default */
  --r-lg: 28px;   /* panels, sheets, featured cards */
  --r-pill: 999px;/* RESERVED: mobile BOOK tab, tag labels, avatars, icon buttons */

  /* ---- 4.2 Shadows (borders over shadows; resting cards usually none) ---- */
  --shadow-sm:  0 4px 14px  rgba(11, 11, 12, .10);
  --shadow-md:  0 14px 44px rgba(11, 11, 12, .16);
  --shadow-lg:  0 26px 80px rgba(11, 11, 12, .22);
  --shadow-cta: 0 10px 26px rgba(242, 106, 36, .35); /* primary CTAs only */

  /* ---- 7.1 Motion ---- */
  --d-micro: 160ms;  /* hovers, icon nudges, toggles, toast */
  --d-card:  240ms;  /* card lifts, accordion, option select, progress width */
  --d-page:  360ms;  /* sheet/modal entry, lightbox fade, route transitions */
  --ease:    cubic-bezier(.22, .8, .24, 1); /* single easing curve */

  /* ---- 8.3 z-index scale (one scale, no ad-hoc values) ---- */
  --z-bookbar:  120;
  --z-nav:      130;
  --z-scrim:    170; /* backdrop dims the page but always sits BELOW sheets */
  --z-sheet:    180;
  --z-modal:    190;
  --z-lightbox: 200;
  --z-toast:    220;

  /* ---- Nav/scroll knobs ---- */
  --nav-h: 64px;
  --bookbar-h: 48px;
}

/* ---- Responsive token shifts ---- */
@media (max-width: 899px) {
  :root {
    --fs-body:    1rem;       /* 16px mobile body */
    --fs-body-lg: 1.125rem;   /* 18px */
    --fs-small:   .8125rem;   /* 13px */
    --fs-btn:     .9375rem;   /* 15px */
    --pad-x:     20px;
    --section-y: clamp(64px, 9vw, 96px);
    --gutter:    16px;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  :root { --pad-x: 32px; }
}

/* ==========================================================================
   Base: what every page inherits by linking this file
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; }

/* ---- Skip-to-content link: first in tab order, hidden until focused ---- */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--d-micro) var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---- :focus-visible everywhere (never suppressed by resets) ---- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 7.4 prefers-reduced-motion: full rules ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}