/**
 * Pick&Dink Rivas Club de Pickleball - Design Tokens
 * Sistema de Diseño Oficial: Morado #573582, Verde Lima #C5D83A, Blanco #FFFFFF
 */

:root {
  /* --- PALETA CROMÁTICA PRINCIPAL --- */
  --color-purple: #573582;          /* Morado Oficial Pick&Dink */
  --color-lime: #C5D83A;            /* Verde Lima Oficial Pick&Dink */
  --color-white: #FFFFFF;           /* Blanco Puro */

  /* --- ESCALA DE PROFUNDIDAD Y ATMÓSFERA --- */
  --color-court-black: #10061C;     /* Negro canchas noche */
  --color-court-dark: #170A26;      /* Morado noche profundo para fondos dark */
  --color-court-surface: #24113B;   /* Tarjetas sobre fondo oscuro */
  --color-court-surface-elevated: #31184F;
  --color-purple-hover: #6D43A1;    /* Hover morado */
  --color-purple-subtle: rgba(87, 53, 130, 0.08);

  /* --- ESCALA LIMA REACTIVA (ACENTOS) --- */
  --color-lime-bright: #D6EA42;     /* Lima iluminada */
  --color-lime-dark: #A4B827;       /* Lima para bordes */
  --color-lime-hover: #D7EB44;
  --color-lime-subtle: rgba(197, 216, 58, 0.14);
  --color-lime-glow: rgba(197, 216, 58, 0.35);

  /* --- FONDOS CLAROS Y SUPERFICIES DE LECTURA --- */
  --color-bg-light: #F8F6FB;        /* Fondo claro con calidez morada sutil */
  --color-cream: #FAF8F5;           /* Blanco roto / crema editorial */
  --color-card-light: #FFFFFF;      /* Tarjeta blanca */
  --color-border-light: rgba(87, 53, 130, 0.12);
  --color-border-dark: rgba(197, 216, 58, 0.18);

  /* --- TIPOGRAFÍA Y CONTRASTE (WCAG AAA) --- */
  --color-text-main: #181126;       /* Texto principal oscuro */
  --color-text-muted: #5E5873;      /* Texto secundario / metadatos */
  --color-text-light: #FFFFFF;      /* Texto sobre morado */
  --color-text-on-lime: #170A26;    /* Texto sobre verde lima (11.2:1 AAA) */

  /* --- FUENTES TIPOGRÁFICAS --- */
  --font-display: 'Oswald', 'Montserrat', 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif; /* Acentos editoriales */
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* --- SOMBRAS Y ELEVACIONES --- */
  --shadow-sm: 0 2px 8px rgba(23, 10, 38, 0.06);
  --shadow-md: 0 6px 20px rgba(23, 10, 38, 0.10);
  --shadow-lg: 0 14px 36px rgba(23, 10, 38, 0.16);
  --shadow-lime: 0 8px 24px -4px rgba(197, 216, 58, 0.45);
  --shadow-purple: 0 8px 26px -4px rgba(87, 53, 130, 0.35);

  /* --- RADIOS ERGONÓMICOS --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 9999px;

  /* --- TRANSICIONES Y FÍSICA CINÉTICA --- */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-INDEX LAYER HIERARCHY --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 500;
  --z-toast: 1000;
}