/* =====================================================================
   IRALU TENNIS — tokens.css
   Variáveis de design (cores, tipografia, espaçamento, efeitos).
   Tudo aqui é "editável" — troque os valores e a plataforma inteira muda.
   Paleta ancorada no logo: preto profundo, verde-limão (bola), teal/azul,
   amarelo/ouro (olho do guepardo).
   ===================================================================== */

:root {
  /* ---------- Base / superfícies (dark mode) ---------- */
  --ink-900: #05080b;          /* fundo mais profundo */
  --ink-800: #080c11;          /* fundo da página */
  --ink-700: #0c1219;          /* topo/áreas escuras */
  --surface: #111a24;          /* cards */
  --surface-2: #16222f;        /* cards elevados */
  --surface-3: #1e2d3d;        /* hover / chips */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* ---------- Cores da marca ---------- */
  --lime: #b4f03a;             /* verde-limão da bola — energia/ação */
  --lime-600: #9bda1f;
  --lime-700: #7cb515;
  --teal: #11c6a6;             /* teal/azul-esverdeado do logo */
  --teal-600: #0aa489;
  --gold: #ffb42e;             /* amarelo/ouro do olho — premium */
  --gold-600: #e89a13;
  --emerald: #0e7a5f;
  --blue-deep: #0c5a6e;

  /* ---------- Texto ---------- */
  --text: #eaf2f1;
  --text-2: #9aabb4;
  --text-3: #6b7b85;
  --on-accent: #06140a;        /* texto sobre fundo verde-limão */

  /* ---------- Ligas gamificadas ---------- */
  --bronze: #cd7f32;
  --prata: #c6d0d8;
  --ouro: #f5c518;
  --platina: #34d7ce;
  --elite-a: #b4f03a;          /* Elite Iralu usa gradiente lime -> teal */
  --elite-b: #11c6a6;

  /* ---------- Estados ---------- */
  --success: #36d399;
  --warning: #ffb42e;
  --danger: #ff5d5d;
  --info: #38b6ff;

  /* ---------- Gradientes ---------- */
  --grad-brand: linear-gradient(118deg, var(--lime) 0%, var(--teal) 100%);
  --grad-elite: linear-gradient(120deg, #b4f03a 0%, #11c6a6 55%, #34d7ce 100%);
  --grad-gold: linear-gradient(120deg, #ffd56b 0%, #ffb42e 60%, #e8870f 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  --grad-hero:
    radial-gradient(1200px 600px at 80% -10%, rgba(17, 198, 166, 0.20), transparent 60%),
    radial-gradient(900px 520px at 8% 0%, rgba(180, 240, 58, 0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));

  /* ---------- Sombras / brilhos ---------- */
  --shadow-sm: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.85);
  --shadow-pop: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
  --glow-lime: 0 0 0 1px rgba(180, 240, 58, 0.30), 0 12px 34px -12px rgba(180, 240, 58, 0.40);
  --glow-teal: 0 0 0 1px rgba(17, 198, 166, 0.30), 0 12px 34px -12px rgba(17, 198, 166, 0.35);

  /* ---------- Raios ---------- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Tipografia ---------- */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Saira", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* escala fluida de títulos */
  --fs-hero: clamp(2.6rem, 9vw, 5.2rem);
  --fs-h1: clamp(2rem, 6vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 4.5vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 3vw, 1.5rem);
  --fs-lead: clamp(1.02rem, 2.4vw, 1.2rem);

  /* ---------- Espaçamento ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --container-narrow: 820px;
  --nav-h: 64px;

  /* ---------- Transições ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.5s var(--ease);
}