/* ============================================================================
   1v1.LOL RELOADED — design tokens (direction G: "Живая лента сверху")
   ----------------------------------------------------------------------------
   Source of truth for the redesign. DESIGN.md mirrors these values; if one
   changes, change both.

   The system is deliberately thin: an ink page, hairline rules instead of
   cards, one interface accent, and one brand red that belongs to the wordmark.
   Anything that needs a gradient, a glow or a glass panel to read is a design
   problem, not a token gap.
   ========================================================================== */

:root {
  /* --- Ground and surfaces -------------------------------------------------
     Two levels only. A third would invite the nested-card look the old site
     has; if something needs separating, use a rule, not another box. */
  --ink: #0a0a0c;          /* the page */
  --ink-raised: #131318;   /* the one raised surface: side panel, sticky bar */
  --ink-inset: #07070a;    /* inset wells: progress track, code, table zebra */

  /* --- Text ---------------------------------------------------------------- */
  --text: #f4f4f5;         /* headings, names, figures */
  --text-muted: #8b93a5;   /* labels, secondary copy, table headers */
  --text-faint: #5b6474;   /* disabled, timestamps, fine print */

  /* --- Accents -------------------------------------------------------------
     Interface accent is blue: live state, current row, focus, primary action.
     Brand red is the wordmark's "v" and nothing else on a normal page — it is
     reserved so that an error state can borrow it and actually feel alarming. */
  --accent: #3b82f6;
  --accent-strong: #60a5fa;   /* hover / focus ring on the accent itself */
  /* Filled buttons carry white type, so their ground has to be darker than --accent:
     #f4f4f5 on #3b82f6 is 3.4:1, which fails at the sign-in button's 16px. #2563eb is
     4.6:1, and the hover step goes darker still rather than losing that contrast. */
  --accent-fill: #2563eb;
  --accent-fill-hover: #1d4ed8;
  --brand-red: #e11d48;       /* wordmark "v", destructive confirmation only */
  --trophy: #f59e0b;          /* trophy glyphs and figures, nothing else */
  --positive: #22c55e;        /* win rate above baseline, online dot */
  --negative: #ef4444;        /* loss, disconnect, failed action */

  /* --- Rarity --------------------------------------------------------------
     Achievement rarity is data, not decoration: the tier is the whole point of
     showing a badge, and players read these seven tiers by colour everywhere
     else in the game. They live here rather than in a component so the profile,
     the catalogue and any future drop screen cannot drift apart. */
  --rarity-common: #9ca3af;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #60a5fa;
  --rarity-epic: #c084fc;
  --rarity-legendary: #fbbf24;
  --rarity-mythical: #f87171;
  --rarity-cosmic: #f8fafc;

  /* --- Podium --------------------------------------------------------------
     The top three of the leaderboard are marked by colour, the way the live site
     already does it. This is position, not decoration, so it lives in tokens
     next to rarity rather than inside the leaderboard component. */
  --medal-gold: #facc15;
  --medal-silver: #d1d5db;
  --medal-bronze: #fb923c;

  /* --- Lines ---------------------------------------------------------------
     The system separates with rules. Hairline is the default; strong is for
     the one division that carries the page (masthead close, column split). */
  --rule: #1e2029;
  --rule-strong: #2b2f3b;
  --rule-accent: color-mix(in srgb, var(--accent) 55%, transparent);

  /* --- Type ----------------------------------------------------------------
     Blinker is already shipped and served by this project (OFL) and carries
     tnum, which the leaderboard and every counter depend on. Weight does the
     hierarchy work; there is no second family. */
  --font: "Blinker", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tabular: var(--font);

  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* labels, small caps */
  --step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* body */
  --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);   /* section headings */
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);          /* rank numerals, panel figures */
  --step-3:  clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);       /* live ribbon figures */
  --step-4:  clamp(2.75rem, 2rem + 3.5vw, 5rem);            /* winner name */

  --tracking-label: 0.09em;   /* small caps labels */
  --tracking-tight: -0.02em;  /* large display numerals and names */

  /* --- Space ---------------------------------------------------------------
     A 4px base. Named by role rather than by size so a component says what it
     means: gutters between columns, rhythm inside a stack. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* --- Shape ---------------------------------------------------------------
     Near-square. The old site rounds everything to 12-16px, which is the
     single strongest "generic dashboard" tell it carries. */
  --radius-0: 0;
  --radius-1: 2px;   /* chips, buttons */
  --radius-2: 4px;   /* the game plate, panels */

  /* --- Motion --------------------------------------------------------------
     Short and functional. The page is read between matches on weak hardware:
     nothing animates that the player did not ask for, except the live dot. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Layout ceiling. On an ultra-wide monitor an unbounded page stretches the play plate past
     any useful size and drags the reading column to 200 characters; both are worse than empty
     margins. 1600 keeps the 16:9 plate large next to a 26rem rail and the prose near 70ch. */
  --measure: 1600px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}