/* =====================================================================
   TIPERLIGA — Design Tokens
   Dark-first. Light overrides via [data-theme="light"].
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand ---- */
  --brand:        #7c5cff;   /* violet — points, glow, wins, primary brand */
  --brand-bright: #9d83ff;
  --brand-dim:    #5b3fd6;
  --brand-ink:    #ffffff;
  --brand-soft:   rgba(124, 92, 255, 0.14);
  --brand-line:   rgba(124, 92, 255, 0.40);

  --gold:         #facc15;   /* gold — primary action / CTA */
  --gold-bright:  #fde047;
  --gold-dim:     #d4a90a;
  --gold-ink:     #1c1605;
  --gold-soft:    rgba(250, 204, 21, 0.13);

  /* ---- Semantic ---- */
  --success:      #1fd497;   /* correct tip */
  --success-soft: rgba(31, 212, 151, 0.14);
  --success-line: rgba(31, 212, 151, 0.40);
  --warning:      #f5a524;
  --warning-soft: rgba(245, 165, 36, 0.14);
  --danger:       #f0476a;   /* wrong tip / destructive */
  --danger-soft:  rgba(240, 71, 106, 0.14);
  --info:         #3da5f4;   /* scheduled / informational */
  --info-soft:    rgba(61, 165, 244, 0.14);
  --live:         #ff4d6d;   /* match in progress */
  --live-soft:    rgba(255, 77, 109, 0.16);

  /* ---- Surfaces (dark default) ---- */
  --bg:           #090c16;
  --bg-deep:      #06080f;
  --surface-1:    #111728;   /* base card */
  --surface-2:    #192135;   /* raised */
  --surface-3:    #232d47;   /* inputs / hover */
  --surface-4:    #2c3858;
  --overlay:      rgba(6, 8, 15, 0.72);

  --line:         rgba(150, 165, 215, 0.12);
  --line-strong:  rgba(150, 165, 215, 0.22);

  /* ---- Text ---- */
  --text-1:       #eef1f9;   /* high emphasis */
  --text-2:       #b8c0d6;   /* body */
  --text-3:       #828caa;   /* muted */
  --text-4:       #59617c;   /* faint / disabled */
  --text-on-brand:#ffffff;

  /* ---- Glow ---- */
  --glow-brand:   0 0 0 1px var(--brand-line), 0 0 26px rgba(124, 92, 255, 0.42);
  --glow-gold:    0 0 0 1px rgba(250, 204, 21, 0.45), 0 0 24px rgba(250, 204, 21, 0.36);
  --glow-success: 0 0 22px rgba(31, 212, 151, 0.42);
  --glow-live:    0 0 18px rgba(255, 77, 109, 0.5);
  --text-glow-brand: 0 0 18px rgba(124, 92, 255, 0.55);
  --text-glow-gold:  0 0 16px rgba(250, 204, 21, 0.45);

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg:    0 18px 50px -12px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.4);
  --shadow-pop:   0 24px 60px -16px rgba(0,0,0,0.78);

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---- Spacing ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 112px;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --num: 'Space Grotesk', system-ui, sans-serif;

  --fs-display: clamp(2.6rem, 5vw, 4.2rem);
  --fs-h1: clamp(2rem, 3.4vw, 3rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.2rem;
  --fs-lg: 1.0625rem;
  --fs-base: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1240px;
  --nav-h: 68px;
}

/* ===================== LIGHT THEME ===================== */
[data-theme="light"] {
  --bg:           #eceff7;
  --bg-deep:      #e0e4f0;
  --surface-1:    #ffffff;
  --surface-2:    #f5f7fc;
  --surface-3:    #e9edf7;
  --surface-4:    #dde3f1;
  --overlay:      rgba(20, 28, 50, 0.40);

  --line:         rgba(30, 45, 90, 0.10);
  --line-strong:  rgba(30, 45, 90, 0.18);

  --text-1:       #111729;
  --text-2:       #414a66;
  --text-3:       #707a93;
  --text-4:       #97a0b6;

  --brand-soft:   rgba(124, 92, 255, 0.12);
  --gold-soft:    rgba(216, 165, 8, 0.16);
  --gold-ink:     #1c1605;

  --shadow-md:    0 4px 14px rgba(40,55,95,0.10), 0 1px 3px rgba(40,55,95,0.08);
  --shadow-lg:    0 18px 50px -16px rgba(40,55,95,0.22), 0 6px 18px rgba(40,55,95,0.10);
  --shadow-pop:   0 24px 60px -16px rgba(40,55,95,0.26);
  --glow-brand:   0 0 0 1px var(--brand-line), 0 0 20px rgba(124, 92, 255, 0.28);
  --glow-gold:    0 0 0 1px rgba(216, 165, 8, 0.5), 0 0 18px rgba(250, 204, 21, 0.30);
}

/* ===================== RESET / BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* ambient background field */
.bg-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(124,92,255,0.16), transparent 60%),
    radial-gradient(760px 500px at 100% 0%, rgba(250,204,21,0.07), transparent 55%),
    radial-gradient(700px 600px at 50% 120%, rgba(31,212,151,0.06), transparent 60%);
}
[data-theme="light"] .bg-field {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(124,92,255,0.10), transparent 60%),
    radial-gradient(760px 500px at 100% 0%, rgba(250,204,21,0.08), transparent 55%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-1);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--brand); color: #fff; }

/* number styling helper */
.num, .tnum {
  font-family: var(--num);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--surface-4); background-clip: content-box; }

/* ===================== LAYOUT UTILITIES ===================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-wide { max-width: 1440px; }
/* Guard: page-level classes share the .wrap element and use `padding: V 0`
   shorthand, which silently wipes the horizontal padding. Re-assert it at
   higher specificity so section content never goes flush to the screen edge. */
html .wrap { padding-inline: 24px !important; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap-gap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }

.muted  { color: var(--text-3); }
.faint  { color: var(--text-4); }
.hi     { color: var(--text-1); }
.brand  { color: var(--brand-bright); }
.gold   { color: var(--gold); }
.ok     { color: var(--success); }
.bad    { color: var(--danger); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-bright);
}

/* gap helpers */
.g-1{gap:4px}.g-2{gap:8px}.g-3{gap:12px}.g-4{gap:16px}.g-5{gap:20px}.g-6{gap:24px}.g-8{gap:40px}

@media (max-width: 720px){
  html .wrap { padding-inline: 16px !important; }
}