/* =========================================================
   V2 · tokens.css — Sistema de diseño (paleta, tipografía, escalas)
   Estética deportiva profesional. Soporta tema claro y oscuro.
   Paleta de fábrica derivada del verde pádel (neutra: sin marca de ningún club).
   ========================================================= */

:root {
  /* Marca */
  --brand-50:  #e7fbf1;
  --brand-100: #c4f5dd;
  --brand-200: #8fecc0;
  --brand-300: #54dd9e;
  --brand-400: #21c47e;   /* verde pádel principal */
  --brand-500: #10a968;
  --brand-600: #0a8654;
  --brand-700: #0a6a45;
  --brand-800: #0b5239;
  --brand-900: #0a3f2d;

  --accent: #38bdf8;      /* azul pista, para datos/links */
  --accent-2: #c2f04b;    /* lima energía, acentos secundarios */
  --gold: #f5b942;        /* podio/destacados */

  /* Semánticos */
  --success: #21c47e;
  --warning: #f6ab2f;
  --danger:  #ff5470;
  --info:    #38bdf8;

  /* Tipografía */
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --lh-tight: 1.15;
  --lh-base: 1.55;

  /* Espaciado (escala 4px) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-10: 4rem;

  /* Radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* Anchos */
  --max-w: 1240px;
  --sidebar-w: 256px;

  /* Transiciones — curvas fuertes (Emil Kowalski): las CSS por defecto son débiles. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);       /* entradas/respuesta: fuerte, instantáneo */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* movimiento en pantalla */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);    /* drawers tipo iOS */
  --t-fast: 140ms var(--ease-out);
  --t: 200ms var(--ease-out);
  --t-slow: 320ms var(--ease-out);
}

/* ---------- Tema oscuro (por defecto) ---------- */
:root, [data-theme="dark"] {
  --bg: #0a1512;
  --bg-2: #0e1c18;
  --surface: #11241e;
  --surface-2: #16302757;
  --surface-raised: #173028;
  --panel: #122620;
  --border: #1f3a30;
  --border-strong: #2a4d40;

  --text: #eafff6;
  --text-soft: #b9d3c8;
  --muted: #7f9b90;

  --brand: var(--brand-400);
  --brand-contrast: #04120c;
  --ring: color-mix(in srgb, var(--brand-400) 55%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.65);

  --hero-grad: radial-gradient(120% 120% at 0% 0%, #133a2c 0%, #0a1512 55%);
  --brand-grad: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color-scheme: dark;
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  --bg: #f3f7f4;
  --bg-2: #eaf1ec;
  --surface: #ffffff;
  --surface-2: #f5faf7;
  --surface-raised: #ffffff;
  --panel: #ffffff;
  --border: #e0e9e3;
  --border-strong: #cdded4;

  --text: #0d1f18;
  --text-soft: #38544a;
  --muted: #6b8377;

  --brand: var(--brand-500);
  --brand-contrast: #ffffff;
  --ring: color-mix(in srgb, var(--brand-500) 40%, transparent);

  --shadow-sm: 0 1px 2px rgba(16,40,30,.06);
  --shadow: 0 10px 30px -12px rgba(16,50,36,.18);
  --shadow-lg: 0 28px 60px -22px rgba(16,50,36,.28);

  --hero-grad: radial-gradient(120% 120% at 0% 0%, #d7f3e4 0%, #f3f7f4 55%);
  --brand-grad: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color-scheme: light;
}