/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Design System
   Faza 1, redesign v2.

   Tokens (color, spacing, radii, shadows, type, z-index, motion)
   + 5 UI patterns z §4.3 prompta jako globalne utility classes
   + prefers-reduced-motion globalny override.

   Components.css zależy od tych tokenów. Importować w shellu PRZED
   components.css.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap');

/* === Tokens =============================================================== */

:root {
  /* Greyscale primitives (źródło: Styles_File.txt — OneFootball reference) */
  --gray-0: #f5f5fa;
  --gray-1: #e1e0e7;
  --gray-2: #c4c2d0;
  --gray-3: #a19db3;
  --gray-4: #6d6a7f;
  --gray-5: #403e4a;
  --gray-6: #2b2b2b;
  --gray-7: #f3f4f5;
  --black-0: #1a1a1a;
  --black: #000;
  --white: #fff;

  /* System colors (loss / win / warn) */
  --system-red: #ff2f54;
  --system-green: #1dbb79;
  --system-yellow: #faff03;
  /* Warn amber — PRO badge + soft warnings. Was hardcoded #ffb800 in
     predictions.css / legal-static.css; promoted to a real token (audit 2026-06-05). */
  --warn: #ffb800;
  --warn-tint: rgba(255, 184, 0, 0.14);
  --warn-border: rgba(255, 184, 0, 0.40);

  /* Brand accent — Variant A1 (Football Intelligence current, default) */
  --accent: #00e5a0;
  --accent-strong: #00b87a;
  --accent-soft: rgba(0, 229, 160, 0.12);
  --accent-fg: var(--black);
  --accent-secondary: var(--accent);
  /* Restrained-accent treatments (Linear/Vercel discipline — accent without
     shouting). --accent-muted: deeper, desaturated solid for large primary
     fills. --accent-tint: a calm accent-tinted surface for the SELECTED state
     of toggles/chips (stronger than --accent-soft so it reads as "on", far
     quieter than a solid neon block). Single accent — no new hue. */
  --accent-muted: #0fa57b;
  --accent-muted-strong: #0a8c69;
  --accent-tint: rgba(0, 229, 160, 0.16);

  /* Risk tier tokens — calibrated, NIE łączyć w jeden ROI (SKILL.md §3) */
  --risk-low-bg: rgba(127, 191, 160, 0.12);
  --risk-low-fg: #7fbfa0;
  --risk-medium-bg: rgba(217, 178, 122, 0.12);
  --risk-medium-fg: #d9b27a;
  --risk-high-bg: rgba(168, 155, 196, 0.12);
  --risk-high-fg: #a89bc4;

  /* Semantic surfaces (dark theme — domyślnie A1) */
  --bg: #060a0f;
  --surface-1: #0b1118;
  --surface-2: #101820;
  --surface-3: #141e28;
  --border: #1a2535;
  --border-strong: #243348;
  --divider: #131c26;

  /* Semantic text */
  --text-primary: #f3f4f5;
  --text-secondary: #c8d8e4;
  --text-tertiary: #7a96a8;
  --text-disabled: #3d5468;

  /* Spacing — 8px grid */
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  /* Border radii — 3 wartości per §4.2 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Shadows — 2 wartości per §4.2 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.24);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — 5 rozmiarów max per §3.2 */
  --text-display: 2.25rem;
  --text-h1: 1.5rem;
  --text-h2: 1.125rem;
  --text-body: 0.875rem;
  --text-small: 0.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Z-index scale */
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Palette variants (scoping przez data-attribute, palette-preview.html) === */

[data-palette="A1"] {
  --bg: #060a0f;
  --surface-1: #0b1118;
  --surface-2: #101820;
  --surface-3: #141e28;
  --accent: #00e5a0;
  --accent-strong: #00b87a;
  --accent-soft: rgba(0, 229, 160, 0.12);
  --accent-fg: var(--black);
  --accent-muted: #0fa57b;
  --accent-muted-strong: #0a8c69;
  --accent-tint: rgba(0, 229, 160, 0.16);
}

[data-palette="A2"] {
  --bg: #000;
  --surface-1: #0a0a0a;
  --surface-2: #131313;
  --surface-3: #1c1c1c;
  --border: #1f1f1f;
  --border-strong: #2b2b2b;
  --divider: #161616;
  --accent: #00e5a0;
  --accent-strong: #00b87a;
  --accent-soft: rgba(0, 229, 160, 0.12);
  --accent-fg: var(--black);
}

[data-palette="B"] {
  --bg: #060a0f;
  --surface-1: #0b1118;
  --surface-2: #101820;
  --surface-3: #141e28;
  --accent: #e1ff57;
  --accent-strong: #b9d83a;
  --accent-soft: rgba(225, 255, 87, 0.12);
  --accent-fg: var(--black);
}

[data-palette="C"] {
  --bg: #060a0f;
  --surface-1: #0b1118;
  --surface-2: #101820;
  --surface-3: #141e28;
  --accent: #00d9ff;
  --accent-strong: #00a4c4;
  --accent-soft: rgba(0, 217, 255, 0.12);
  --accent-secondary: #ffb800;
  --accent-fg: var(--black);
}

/* === Reset + base ========================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--easing-out); }
a:hover { color: var(--accent); }

button {
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  cursor: pointer;
}

img, svg { max-width: 100%; display: block; }

ul, ol { padding: 0; margin: 0; list-style: none; }

/* === Type utility classes ================================================= */

.text-display { font-size: var(--text-display); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: -0.02em; }
.text-h1      { font-size: var(--text-h1);      font-weight: var(--weight-bold);       line-height: var(--leading-snug);  letter-spacing: -0.01em; }
.text-h2      { font-size: var(--text-h2);      font-weight: var(--weight-semibold);   line-height: var(--leading-snug); }
.text-body    { font-size: var(--text-body);    font-weight: var(--weight-regular);    line-height: var(--leading-normal); }
.text-small   { font-size: var(--text-small);   font-weight: var(--weight-medium);     line-height: var(--leading-normal); }

.text-mono    { font-family: var(--font-mono); }
.text-tnum,
.tnum         { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* .tnum alias (shorter ergonomics); apply na każdy numeric content w UI:
   counters, scores, odds, stats, percentages. Inter ma built-in tabular nums. */

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-accent     { color: var(--accent); }
.text-success    { color: var(--system-green); }
.text-danger     { color: var(--system-red); }

.uppercase   { text-transform: uppercase; letter-spacing: 0.05em; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Accessible visually-hidden utility — readable by screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Layout utilities ===================================================== */

.stack > * + * { margin-top: var(--space-2); }
.cluster       { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.row           { display: flex; align-items: center; gap: var(--space-1); }
.row-between   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.grid          { display: grid; gap: var(--space-2); }

.divider {
  height: 1px;
  width: 100%;
  background: var(--divider);
  border: none;
  margin: 0;
}

/* === 5 UI patterns z §4.3 (cross-component utilities) ===================== */

/* 1. Stagger reveal — JS ustawia --i: <index> na każdym dziecku (IntersectionObserver) */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(8px);
  animation: stagger-in var(--duration-slow) var(--easing-out) forwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes stagger-in {
  to { opacity: 1; transform: none; }
}

/* 2. Status icon transition — pop scale na zmianie stanu */
.status-icon-transition {
  display: inline-flex;
  animation: status-pop var(--duration-base) var(--easing-pop);
}
@keyframes status-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* 3. Hover translate + shadow — feedback dla klikalnych surface'ów */
.hover-translate {
  transition: transform var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
  will-change: transform;
}
.hover-translate:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 4. Backdrop blur overlay — modal / side panel scrim */
.backdrop-blur-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
}

/* 5. Ghost button utility — border-only z hover fill */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* === Live pulse (używane przez MatchRow w trybie live) ==================== */

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* === Focus visible — globalny a11y ======================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* === A11y — globalny prefers-reduced-motion override ====================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Scrollbar — subtle dark theme ======================================== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }