/* css/tokens.css — design tokens (CSS custom properties). */

:root {
  /* === Neutros === */
  --bg-primary:    #FFFFFF;
  --bg-soft:       #F8F8F6;
  --bg-dark:       #0A0A0A;
  --fg-primary:    #0A0A0A;
  --fg-muted:      #525252;
  --fg-subtle:     #A3A3A3;
  --border:        #E5E5E5;
  --border-subtle: #F0F0EC;

  /* === Marca === */
  --brand-magenta:  #E91E63;
  --brand-orange:   #F39200;
  --brand-yellow:   #FBBC04;
  --brand-cyan:     #29B6F6;
  --brand-burgundy: #7E1A2D;

  /* Versiones oscurecidas para texto sobre blanco (yellow + cyan claros) */
  --brand-yellow-dark: #C99800;
  --brand-cyan-dark:   #1A8DCE;

  /* === Colores propios de sector ===
     Hostelería y Corporativo necesitan colores fuera de la paleta de marca
     porque amarillo (hostelería) y burdeos (corporativo) se confundían
     con naranja (eventos) y magenta (retail) respectivamente. */
  --sector-motorsport:  var(--brand-cyan);
  --sector-hosteleria:  #15803D;   /* verde esmeralda */
  --sector-retail:      var(--brand-magenta);
  --sector-eventos:     var(--brand-orange);
  --sector-corporativa: #3730A3;   /* indigo */
  --sector-aeropuertos: #0F766E;   /* teal oscuro — aviación/transporte */
  --sector-ocio:        #7C3AED;   /* violeta vibrante — entretenimiento/juego */

  /* === Asignación por modelo ===
     Colores propios del modelo (independientes de la paleta de marca) */
  --model-a3:        #ED4543;  /* rojo  — A3 Basic */
  --model-a5:        #F8AB03;  /* naranja — A5 Option */
  --model-a6:        #67B8AF;  /* teal  — A6 Prime */
  --model-a8:        #6C3C59;  /* burdeos — A8 Prime Exclusive */

  /* Versiones oscurecidas para texto sobre blanco (los claros las necesitan) */
  --model-a3-strong: #C4302E;
  --model-a5-strong: #C98800;
  --model-a6-strong: #3E8E85;
  --model-a8-strong: #6C3C59;

  /* Foreground sobre el color del modelo (blanco salvo cuando el color es claro) */
  --model-a3-fg: #FFFFFF;
  --model-a5-fg: var(--bg-dark);
  --model-a6-fg: var(--bg-dark);
  --model-a8-fg: #FFFFFF;

  /* === Estado === */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #DC2626;

  /* === Tipografía === */
  --font-display: 'Geist', 'Inter Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* === Spacing scale === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-magenta: 0 12px 32px rgba(233, 30, 99, 0.25);

  /* === Easing & transitions === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);
  --transition-slow: 500ms var(--ease);

  /* === Layout === */
  --container-max: 1280px;
  --topbar-height: 72px;

  /* === Z-index === */
  --z-base:    1;
  --z-sticky:  50;
  --z-overlay: 80;
  --z-drawer:  90;
  --z-modal:   100;
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 64px;
  }
}