/* =========================================================================
   PadelUp — Design System / Tokens
   Única fuente de verdad para color, tipografía, spacing, radios, sombras,
   motion y z-index. Ningún componente debe inventar valores fuera de acá.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     COLOR — escala neutra (dark por defecto)
     Superficies por elevación: canvas < surface < raised < overlay
     --------------------------------------------------------------------- */
  --c-canvas: #0A0F1A;
  --c-surface: #111827;
  --c-raised: #17202F;
  --c-hover: #1D2839;
  --c-overlay: #1A2331;
  --c-sunken: #070B13;

  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-strong: rgba(255, 255, 255, 0.13);
  --c-border-focus: rgba(198, 255, 61, 0.55);

  /* Texto: 4 niveles, todos ≥ 4.5:1 sobre --c-surface */
  --c-text: #F2F6FC;
  --c-text-secondary: #B6C2D4;
  --c-text-muted: #8593A8;
  --c-text-disabled: #5C6879;

  /* Marca: el lime se reserva para la acción primaria y el estado activo */
  --c-brand: #C6FF3D;
  --c-brand-hover: #D4FF6B;
  --c-brand-active: #B2EA26;
  --c-brand-ink: #0A0F1A;
  --c-brand-text: #C6FF3D;
  --c-brand-subtle: rgba(198, 255, 61, 0.12);
  --c-brand-border: rgba(198, 255, 61, 0.28);

  /* Acento secundario para información/categorías */
  --c-accent: #6EA8FE;
  --c-accent-text: #8FBCFF;
  --c-accent-subtle: rgba(110, 168, 254, 0.12);
  --c-accent-border: rgba(110, 168, 254, 0.28);

  /* Semánticos */
  --c-success: #3DD68C;
  --c-success-text: #5FE0A3;
  --c-success-subtle: rgba(61, 214, 140, 0.12);
  --c-success-border: rgba(61, 214, 140, 0.28);

  --c-warning: #F5B544;
  --c-warning-text: #FFC65C;
  --c-warning-subtle: rgba(245, 181, 68, 0.12);
  --c-warning-border: rgba(245, 181, 68, 0.28);

  --c-danger: #FF6B6B;
  --c-danger-text: #FF8A8A;
  --c-danger-subtle: rgba(255, 107, 107, 0.12);
  --c-danger-border: rgba(255, 107, 107, 0.3);

  /* Paleta de avatares: tonos armonizados (no saturación máxima) */
  --c-av-1: #7C9EF5;
  --c-av-2: #62C6B4;
  --c-av-3: #E2925F;
  --c-av-4: #B98CE0;
  --c-av-5: #E07C93;
  --c-av-6: #85BE5C;
  --c-av-7: #56B3D4;
  --c-av-8: #D9A94A;

  /* ---------------------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-numeric: "Inter", ui-monospace, "SF Mono", monospace;

  /* Escala (1.200 minor third, redondeada a px enteros) */
  --fs-display: 2.25rem;  /* 36 */
  --fs-h1: 1.625rem;      /* 26 */
  --fs-h2: 1.25rem;       /* 20 */
  --fs-h3: 1.0625rem;     /* 17 */
  --fs-body: 0.9375rem;   /* 15 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-caption: 0.8125rem;/* 13 */
  --fs-micro: 0.75rem;    /* 12 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.06em;

  /* ---------------------------------------------------------------------
     SPACING — base 4px
     --------------------------------------------------------------------- */
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */

  /* ---------------------------------------------------------------------
     RADIOS
     --------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------------------------------------------------------------------
     SOMBRAS — sutiles, capas bajas
     --------------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --sh-md: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 14px 32px -8px rgba(0, 0, 0, 0.5);
  --sh-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.6);
  --sh-focus: 0 0 0 3px rgba(198, 255, 61, 0.28);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --d-instant: 90ms;
  --d-fast: 140ms;
  --d-base: 200ms;
  --d-slow: 300ms;
  --e-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --w-sidebar: 244px;
  --w-content: 1200px;
  --h-topbar: 56px;
  --h-bottomnav: 60px;
  --h-control: 40px;      /* inputs y botones estándar */
  --h-control-sm: 32px;
  --h-control-lg: 48px;   /* touch: mínimo cómodo en mobile */
  --tap-min: 44px;        /* objetivo táctil mínimo (WCAG 2.5.5) */

  /* ---------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-bottomnav: 30;
  --z-drawer: 40;
  --z-overlay: 50;
  --z-toast: 60;
  --z-tooltip: 70;
  --z-celebration: 80;
}

/* =========================================================================
   TEMA CLARO
   ========================================================================= */
[data-theme="light"] {
  --c-canvas: #F7F9FC;
  --c-surface: #FFFFFF;
  --c-raised: #FFFFFF;
  --c-hover: #F1F5FA;
  --c-overlay: #FFFFFF;
  --c-sunken: #EDF1F7;

  --c-border: rgba(12, 22, 40, 0.09);
  --c-border-strong: rgba(12, 22, 40, 0.16);
  --c-border-focus: rgba(90, 130, 20, 0.5);

  --c-text: #0E1726;
  --c-text-secondary: #46556C;
  --c-text-muted: #63718A;
  --c-text-disabled: #97A2B4;

  /* En claro el lime puro no contrasta como texto: usamos una versión oscura */
  --c-brand-text: #4A7A05;
  --c-brand-subtle: rgba(150, 200, 40, 0.16);
  --c-brand-border: rgba(120, 170, 20, 0.35);

  --c-accent: #2F6FE0;
  --c-accent-text: #1F5AC4;
  --c-accent-subtle: rgba(47, 111, 224, 0.1);
  --c-accent-border: rgba(47, 111, 224, 0.26);

  --c-success-text: #0F7A4E;
  --c-success-subtle: rgba(15, 122, 78, 0.1);
  --c-success-border: rgba(15, 122, 78, 0.24);

  --c-warning-text: #96610A;
  --c-warning-subtle: rgba(150, 97, 10, 0.1);
  --c-warning-border: rgba(150, 97, 10, 0.24);

  --c-danger: #E23D3D;
  --c-danger-text: #C42B2B;
  --c-danger-subtle: rgba(196, 43, 43, 0.09);
  --c-danger-border: rgba(196, 43, 43, 0.24);

  --sh-xs: 0 1px 2px rgba(16, 30, 54, 0.06);
  --sh-sm: 0 2px 6px rgba(16, 30, 54, 0.07);
  --sh-md: 0 6px 16px -4px rgba(16, 30, 54, 0.1);
  --sh-lg: 0 14px 32px -8px rgba(16, 30, 54, 0.14);
  --sh-xl: 0 24px 56px -12px rgba(16, 30, 54, 0.18);
  --sh-focus: 0 0 0 3px rgba(120, 170, 20, 0.3);
}