/* Design tokens — leboll.pl
 * Source: approved mockup mockups/leboll.pl/c2-tablica.html (C2 «Tablica»), 2026-10-14.
 * Palette = brief §4 «Night Arena». Values moved as they are; additions are marked.
 */
:root {
  /* ── Colour: from the mockup (brief §4) ─────────────────────────────── */
  --bg: #101019;
  --bg-raised: #1A1A29;
  --surface: #232337;
  --surface-hover: #2C2B44;
  --line: #3B3B51;
  --text: #F5F5F8;
  --text-muted: #AFB0C2;
  --text-soft: #D5D6E2;          /* mockup: secondary copy on dark photo / tiles */
  --text-dim: #DADBE6;           /* mockup: list labels (ladder, footer links) */
  --primary: #C8F04A;
  --primary-hover: #D6F76E;
  --primary-ink: #171B0A;
  --secondary: #9178F9;
  --secondary-soft: #C9BDFF;
  --info: #6FB8FF;
  --danger: #FF687A;
  --success: #5CDC9E;
  --plate: #0A0A11;              /* LED plate */
  --dot-off: rgba(200, 240, 74, .075);
  --hair: rgba(255, 255, 255, .07);
  --hair-2: rgba(255, 255, 255, .12);
  --primary-12: color-mix(in oklab, var(--primary) 12%, transparent);
  --secondary-16: color-mix(in oklab, var(--secondary) 16%, transparent);

  /* ── Colour: added (states the mockup does not draw) ─────────────────── */
  --danger-12: color-mix(in oklab, var(--danger) 12%, transparent);
  --success-12: color-mix(in oklab, var(--success) 12%, transparent);
  --info-12: color-mix(in oklab, var(--info) 12%, transparent);
  --scrim: rgba(5, 5, 10, .6);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--primary) 40%, transparent);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --led: "Doto", ui-monospace, monospace;   /* digits only */
  --fs-h1: clamp(30px, 3vw, 42px);
  --fs-hero: clamp(36px, 4.2vw, 60px);
  --fs-h2: clamp(24px, 2.2vw, 28px);
  --fs-h3: 20px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --lh-tight: 1.05;
  --lh-base: 1.5;

  /* ── Shape & depth ───────────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 8px;
  --radius-control: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --radius-card: 16px;
  --r-tile: 22px;
  --r-pill: 999px;
  --shadow-popover: 0 24px 70px rgba(0, 0, 0, .45);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px rgba(0, 0, 0, .35);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, .045);

  /* ── Space ───────────────────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-22: 22px;
  --space-32: 32px; --space-44: 44px; --space-64: 64px;

  /* ── Container ───────────────────────────────────────────────────────── */
  --wrap: 1360px;
  --gut: clamp(16px, 3vw, 32px);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 450ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 40; --z-dock: 60; --z-cookie: 65; --z-scrim: 80; --z-drawer: 90; --z-menu: 112;
  --z-toast: 120; --z-modal: 110; --z-gate: 130;

  /* ── Kit aliases (base.css / forms.js / tools read these names) ──────── */
  --color-bg: var(--bg);
  --color-surface: var(--bg-raised);
  --color-text: var(--text);
  --color-muted: var(--text-muted);
  --color-brand: var(--primary);
  --color-border: var(--line);
  --color-error: var(--danger);
  --color-success: var(--success);
  --font-body: var(--ui);
  --font-display: var(--ui);
  --container: var(--wrap);
  --container-pad: var(--gut);
}

/* Breakpoints (constants): 1279 · 1099 · 767 · 389 — mockup C2 media queries.
   Reference widths in kit.config.json → breakpoints (1440 / 390). */