/* Design tokens and product fonts. This file owns the token hierarchy and
   loads first: every other stylesheet consumes these custom properties and
   must not redefine them. Load order matters: these stylesheets are ordered
   fragments of one cascade (see index.html). Mobile overrides live in
   responsive.css. */

/* Product typefaces (self-hosted, SIL OFL 1.1 — see /fonts/LICENSE-*.txt).
   Inter is the functional face for everything players read quickly.
   Press Start 2P is the pixel display face for large identity moments only —
   never body copy, controls, prompts, or rules. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Typography roles ---- */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Press Start 2P", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Six roles, capped. Display is for stage headlines and identity moments;
     numeric text additionally sets font-variant-numeric: tabular-nums. */
  --text-display: clamp(1.7rem, 7vw, 3.1rem);
  --text-title: clamp(1.35rem, 4.5vw, 2rem);
  --text-section: clamp(1.1rem, 2.6vw, 1.35rem);
  --text-body: 1rem;
  --text-label: 0.88rem;
  --text-caption: 0.78rem;

  /* ---- Color: product layer (dark by default) ---- */
  --bg-deep: #080914;
  --bg-raised: #17132d;
  --bg-ink: #080a12;
  --ink: #f8f7ff;
  --ink-muted: #b9b6cf;

  /* ---- Color: party accents (honest names) ---- */
  --party-pink: #ff4f8b;
  --party-berry: #f04478;
  --party-berry-soft: rgba(240, 68, 120, 0.7);
  --party-violet: #8b5cf6;
  --party-cyan: #6ce5ff;
  --party-cyan-soft: rgba(108, 229, 255, 0.34);
  --party-lime: #b7f36b;
  --party-amber: #ffb14a;
  --party-teal: #3ddcb4;
  --party-sky: #7dabff;
  --party-sun: #ffd75e;
  --party-coral: #ff7a5c;
  --party-magenta: #d967ff;
  --party-ice: #a8c6f0;

  /* ---- Color: shared surfaces ---- */
  --party-surface: rgba(18, 20, 42, 0.78);
  --party-surface-strong: rgba(13, 15, 32, 0.96);
  --party-line: rgba(165, 154, 255, 0.24);

  /* ---- Color: semantic roles (never the only carrier of meaning) ---- */
  --success: #37a662;
  --success-soft: rgba(55, 166, 98, 0.18);
  --success-ink: #baf3cd;
  --danger: #e05761;
  --danger-soft: rgba(200, 72, 79, 0.2);
  --danger-ink: #ffd1d5;
  --warning: #ffcd5c;
  --warning-soft: rgba(216, 180, 95, 0.18);
  --warning-ink: #ffe4a3;
  --info: var(--party-cyan);
  --info-soft: rgba(108, 229, 255, 0.12);
  --info-ink: #bff5ff;

  /* ---- Spacing scale (4px base) ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---- Shape scale. Pixel-art elements stay deliberately square. ---- */
  --radius-sm: 10px;      /* chips, mini cards, inline elements */
  --radius-control: 14px; /* buttons, inputs, cards */
  --radius-surface: 20px; /* panels, sheets, dialogs, stages */
  --radius-pill: 999px;   /* pills, badges, avatar rings */

  /* ---- Touch target scale (hard 44px minimum for anything interactive) ---- */
  --touch-target: 2.75rem;   /* 44px minimum */
  --touch-comfort: 3rem;     /* 48px default control */
  --touch-primary: 3.25rem;  /* 52px primary/repeated in-game action */

  /* ---- Motion roles. transform/opacity only; interruptible; keyed by
         room/round/reveal identifiers where gameplay-driven. ---- */
  --motion-micro: 140ms;       /* press, toggle, selection, counter */
  --motion-state: 220ms;       /* content or phase change within a surface */
  --motion-spatial: 320ms;     /* sheet, dialog, screen movement */
  --motion-gameplay: 480ms;    /* draw, flip, advance, consequence */
  --motion-celebration: 1200ms;/* win moments; skippable, never blocking */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1.2);

  /* ---- Layer conventions (match current usage; reference, do not invent) ---- */
  --layer-shell: 8;      /* sticky banners, sticky primary actions */
  --layer-tools: 9;      /* floating Tools cluster */
  --layer-feedback: 11;  /* toasts, sip popups, countdown overlays */
  --layer-social: 25;    /* transient social feed */
  --layer-dialog: 30;    /* modal dialogs and sheets */
  --layer-transition: 60;/* full-screen game transitions */
  --layer-reconnect: 80; /* connection recovery overlay */
}

/* Reduced motion: motion tokens collapse so token-driven animation delivers
   its end state immediately. The legacy blanket override in animations.css
   remains as a safety net for pre-token animations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 1ms;
    --motion-state: 1ms;
    --motion-spatial: 1ms;
    --motion-gameplay: 1ms;
    --motion-celebration: 1ms;
  }
}