/* ==========================================================================
   2D Football Wars — variables.css
   Design tokens: colors, typography, motion, shadows, breakpoints.
   ========================================================================== */

:root {
  /* ---- Core palette -------------------------------------------------- */
  --c-bg-0: #05070f;
  --c-bg-1: #0a0f1e;
  --c-bg-2: #101a30;
  --c-panel: rgba(13, 20, 38, 0.86);
  --c-panel-soft: rgba(18, 28, 52, 0.72);
  --c-line: rgba(120, 160, 255, 0.16);
  --c-line-strong: rgba(140, 180, 255, 0.35);

  --c-text: #eef3ff;
  --c-text-dim: #9fb0d0;
  --c-text-faint: #64748f;

  --c-accent: #38e08c;      /* pitch green */
  --c-accent-2: #6ecbff;    /* stadium light blue */
  --c-gold: #ffcf4d;
  --c-danger: #ff5d6e;
  --c-focus: #6ecbff;

  /* ---- Team colors (JS overrides these for colorblind/high-contrast) - */
  --c-p1: #2f7bff;
  --c-p1-glow: rgba(47, 123, 255, 0.55);
  --c-p2: #ff3b4d;
  --c-p2-glow: rgba(255, 59, 77, 0.55);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Segoe UI", "Trebuchet MS", Futura, system-ui, -apple-system,
    sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;

  /* ---- Stage unit ------------------------------------------------------
     The play area is a fixed 16:9 box, so every pixel of it is a constant
     fraction of the game world no matter how big the window is. Sizing the
     whole interface from that box — rather than from the viewport — is what
     makes a phone in landscape render the *same* layout as a desktop, just
     smaller: identical proportions, identical placement, nothing hidden and
     nothing reflowed.

     `--u` is 16px when the stage is at its 1280px desktop reference width,
     so desktop rendering is unchanged and every other size is a clean scale
     of it. All type, spacing and radii below are multiples of it.          */
  --stage-w: min(100vw, calc(100vh * (16 / 9)));
  /* svh is the viewport with the mobile browser's chrome *shown*, so the
     stage can never be taller than what is actually visible and never
     resizes as the URL bar slides away mid-match. Older engines keep the
     vh line above. */
  --stage-w: min(100vw, calc(100svh * (16 / 9)));
  --u: calc(var(--stage-w) / 80 * var(--ui-scale));

  /* Menus are drawn a step smaller than the HUD.
     The interface is authored against the 16:9 reference above, but menu
     panels carry far more content than the HUD does, and at full scale the
     longer ones (daily challenges, the locker, the player card) ran past the
     bottom of a short window. Scaling the menu layer alone keeps the HUD
     exactly as it was while every panel fits without scrolling. */
  --menu-scale: 0.84;

  --fs-hero: calc(var(--u) * 5.2);
  --fs-title: calc(var(--u) * 2.4);
  --fs-big: calc(var(--u) * 1.5);
  --fs-base: calc(var(--u) * 1);
  --fs-small: calc(var(--u) * 0.84);
  --fs-tiny: calc(var(--u) * 0.72);
  /* No absolute floors here on purpose. A floor would make small viewports
     render a *different* set of proportions from desktop, which is exactly
     what this system exists to prevent. Players who want larger type raise
     UI Scale in Settings → Accessibility; that scales the whole interface
     together and keeps the layout intact. */

  --ls-wide: 0.14em;
  --ls-huge: 0.3em;

  /* ---- UI scaling (accessibility, JS-driven) ------------------------- */
  --ui-scale: 1;

  /* ---- Radii / spacing ---------------------------------------------- */
  --r-sm: calc(var(--u) * 0.5);
  --r-md: calc(var(--u) * 0.875);
  --r-lg: calc(var(--u) * 1.375);
  --r-pill: 999px;

  --sp-1: calc(var(--u) * 0.25);
  --sp-2: calc(var(--u) * 0.5);
  --sp-3: calc(var(--u) * 0.875);
  --sp-4: calc(var(--u) * 1.375);
  --sp-5: calc(var(--u) * 2.125);

  /* Minimum comfortable tap target (mobile guidelines). */
  --tap-min: 44px;

  /* ---- Shadows / glow ------------------------------------------------ */
  --sh-panel: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  --sh-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
  --sh-btn: 0 6px 18px rgba(0, 0, 0, 0.45);
  --glow-accent: 0 0 18px rgba(56, 224, 140, 0.45);
  --glow-blue: 0 0 22px rgba(110, 203, 255, 0.4);
  --glow-gold: 0 0 26px rgba(255, 207, 77, 0.5);

  /* ---- Motion -------------------------------------------------------- */
  --t-fast: 130ms;
  --t-med: 260ms;
  --t-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.5, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);

  /* ---- Z layers ------------------------------------------------------ */
  --z-canvas: 1;
  --z-hud: 10;
  --z-announcer: 20;
  --z-screens: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-loading: 60;

  /* ---- Breakpoints (reference; used in responsive.css media queries) -
     --bp-mobile: 560px;  --bp-tablet: 900px;  --bp-desktop: 1280px;     */
}

/* High contrast theme override (toggled on <html> by JS) */
html.high-contrast {
  --c-panel: rgba(2, 4, 10, 0.96);
  --c-panel-soft: rgba(4, 8, 18, 0.94);
  --c-line: rgba(210, 225, 255, 0.5);
  --c-line-strong: rgba(230, 240, 255, 0.8);
  --c-text: #ffffff;
  --c-text-dim: #d7e1f5;
  --c-text-faint: #aab7cf;
}

/* Colorblind-friendly team palette (toggled on <html> by JS) */
html.colorblind {
  --c-p1: #1f8fff;
  --c-p1-glow: rgba(31, 143, 255, 0.55);
  --c-p2: #ffb020;
  --c-p2-glow: rgba(255, 176, 32, 0.55);
}