/* ==========================================================================
   AUDI PERÚ SIM CHALLENGE 2026 — DESIGN TOKENS
   Capa 1 del design system: valores atómicos.
   Ningún componente debe usar valores hardcodeados; siempre var(--token).

   Identidad de marca:
   #000001 → fondos · #F50537 → títulos y logo · #FFFFFF → texto y párrafos
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COLOR — Marca
     -------------------------------------------------------------------- */
  --color-brand-red:        #F50537;  /* Rojo-naranja Audi Perú Sim Challenge — títulos, logo y acción principal */
  --color-brand-red-hover:  #D3042F;
  --color-brand-red-active: #B00428;
  --color-brand-black:      #000001;  /* Negro — fondo principal */
  --color-brand-titanium:   #9BA0A8;  /* Plata titanio — acentos secundarios */
  --color-brand-white:      #FFFFFF;  /* Texto y párrafos */

  /* --------------------------------------------------------------------
     COLOR — Neutros (escala sobre negro puro, de oscuro a claro)
     -------------------------------------------------------------------- */
  --color-neutral-950: #000001;
  --color-neutral-900: #0E0E10;
  --color-neutral-800: #1A1A1D;
  --color-neutral-700: #28282C;
  --color-neutral-600: #3C3C42;
  --color-neutral-500: #5C5C64;
  --color-neutral-400: #82828A;
  --color-neutral-300: #A8A8B0;
  --color-neutral-200: #CECED4;
  --color-neutral-100: #E8E8EB;
  --color-neutral-50:  #F5F5F7;

  /* --------------------------------------------------------------------
     COLOR — Semánticos
     -------------------------------------------------------------------- */
  --color-success: #2ECC71;
  --color-warning: #F5A623;
  --color-error:   #FF3B4E;
  --color-info:    #3B9EFF;

  /* --------------------------------------------------------------------
     COLOR — Roles de uso (alias sobre la paleta)
     -------------------------------------------------------------------- */
  --color-bg:             var(--color-brand-black);   /* #000001 — fondos */
  --color-bg-elevated:    var(--color-neutral-900);
  --color-bg-sunken:      var(--color-brand-black);
  --color-surface:        var(--color-neutral-800);
  --color-border:         var(--color-neutral-700);
  --color-border-strong:  var(--color-neutral-600);
  --color-text:           var(--color-brand-white);   /* #FFFFFF — texto y párrafos */
  --color-text-secondary: var(--color-neutral-300);
  --color-text-muted:     var(--color-neutral-400);
  --color-text-inverse:   var(--color-brand-black);
  --color-heading:        var(--color-brand-red);     /* #F50537 — títulos y logo */
  --color-accent:         var(--color-brand-red);
  --color-focus-ring:     rgba(245, 5, 55, 0.45);

  /* --------------------------------------------------------------------
     TIPOGRAFÍA — Audi Type (oficial), definida en fonts.css

     --font-title   → titulares (h1–h4, section/hero/countdown titles):
                      Extended Normal — ancha y fina, look elegante.
     --font-display → cromo de interfaz (botones, nav, badges, cifras):
                      Bold — compacta y con peso para legibilidad chica.
     --font-display-extended → acento puntual muy ancho (uso esporádico).
     -------------------------------------------------------------------- */
  --font-title:            "Audi Type Extended Normal", "Arial Narrow", sans-serif;
  --font-display:          "Audi Type Bold", "Arial", sans-serif;
  --font-display-extended: "Audi Type Extended", "Arial Black", sans-serif;
  --font-body:             "Audi Type", -apple-system, "Segoe UI", sans-serif;
  --font-mono:             "JetBrains Mono", "SF Mono", monospace;

  /* Escala tipográfica — fina y contenida, nunca invasiva */
  --text-xs:   0.75rem;    /* 12px — captions, labels */
  --text-sm:   0.875rem;   /* 14px — texto secundario */
  --text-base: 1rem;       /* 16px — cuerpo */
  --text-lg:   1.125rem;   /* 18px — lead */
  --text-xl:   1.375rem;   /* 22px — h3 */
  --text-2xl:  1.75rem;    /* 28px — h2 */
  --text-3xl:  2.5rem;     /* 40px — h1 */
  --text-4xl:  3.75rem;    /* 60px — hero display */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.1;   /* titulares display */
  --line-height-snug:   1.3;   /* headings */
  --line-height-normal: 1.6;   /* cuerpo */

  --letter-spacing-wide: 0.08em; /* labels uppercase estilo telemetría */

  /* --------------------------------------------------------------------
     ESPACIADO — escala base 4px
     -------------------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* --------------------------------------------------------------------
     BORDES Y RADIOS
     Radios contenidos: la marca es angular, no redondeada.
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 999px;  /* solo badges/pills */

  --border-width: 1px;
  --border-width-strong: 2px;

  /* --------------------------------------------------------------------
     SOMBRAS — elevación sobre fondo oscuro
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow-red: 0 0 24px rgba(245, 5, 55, 0.35); /* énfasis de marca */

  /* --------------------------------------------------------------------
     MOTION
     Rápido y decidido: nada debe sentirse lento en un producto de F1.
     -------------------------------------------------------------------- */
  --duration-fast:   120ms;  /* hovers, toggles */
  --duration-base:   200ms;  /* transiciones estándar */
  --duration-slow:   400ms;  /* entradas de página, modales */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-race:   cubic-bezier(0.16, 1, 0.3, 1); /* arranque brusco, frenada suave */

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-max: 1200px;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}