/* ═══════════════════════════════════════════════════════
   TuCancha — Design Tokens
   Sistema centralizado de variables CSS.
   Todos los valores visuales parten de acá.
   ═══════════════════════════════════════════════════════ */

:root {

  /* ── Colores ─────────────────────────────────────── */

  /* Primario (verde TuCancha) */
  --color-primary:       #22c55e;
  --color-primary-hover: #16a34a;
  --color-primary-light: #6eeaa0;

  /* Texto */
  --color-text:          #111;
  --color-text-secondary:#666;
  --color-text-muted:    #999;
  --color-text-inverse:  #fff;

  /* Fondos */
  --color-bg:            #fff;
  --color-bg-page:       #f7f7f8;
  --color-bg-card:       #fff;
  --color-bg-hover:      #f4f4f4;
  --color-bg-dark:       #111;

  /* Bordes */
  --color-border:        #ececec;
  --color-border-light:  #f0f0f0;

  /* Semánticos */
  --color-error:         #e53935;
  --color-warning:       #f5b301;
  --color-success:       #22c55e;
  --color-info:          #3b82f6;

  /* ── Spacing (base 8px) ──────────────────────────── */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Border Radius ───────────────────────────────── */

  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* ── Typography ──────────────────────────────────── */

  --font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  /* ── Shadows ─────────────────────────────────────── */

  --shadow-sm:  0 2px 12px rgba(0,0,0,.03);
  --shadow-md:  0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.08);
  --shadow-xl:  0 12px 32px rgba(0,0,0,.12);

  /* ── Easings ──────────────────────────────────────── */

  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:      cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Transitions ─────────────────────────────────── */

  --transition-fast:   150ms var(--ease-out-expo);
  --transition-normal: 250ms var(--ease-out-expo);
  --transition-slow:   400ms var(--ease-out-expo);

  /* ── Layout ──────────────────────────────────────── */

  --max-width:       1280px;
  --max-width-narrow: 720px;
  --header-height:    64px;

  /* ── Z-index scale ───────────────────────────────── */

  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-header:    50;
  --z-tooltip:   60;
}