/* ==========================================================================
   Autoexpress El Rosario — reset y variables globales
   Única fuente de verdad para color, tipografía, sombras y movimiento.

   Dos capas de color:
   1. --brand-* y --day-*: valores fijos de la marca. js/scene.js los lee
      para pintar la escena 3D (noche y día) y no cambian con el tema.
   2. Tokens de interfaz (--night, --cream, --surface…): cambian entre el
      modo oscuro (predeterminado) y el claro, [data-theme='light'].
   ========================================================================== */

:root {
  /* ---------- Marca (fijos) ---------- */
  --brand-navy:       #060a14;
  --brand-navy-2:     #0a1122;
  --brand-navy-3:     #111a31;
  --brand-cream:      #f2ecdf;
  --brand-blue:       #2447a6;
  --brand-blue-light: #8fa9e6;
  --brand-wine:       #8c1c22;
  --brand-wine-light: #c65a5f;

  /* Pintura de las unidades reales (cabina del camión 3D) */
  --truck-red:        #b3141c;

  /* ---------- Escena de día (fijos) ---------- */
  --day-sky:          #5f8fd0;
  --day-horizon:      #f1e7d4;
  --day-ground:       #8f8a74;
  --day-road:         #44474f;
  --day-ridge:        #8796ad;
  --day-sun:          #ffe9bd;

  /* ---------- Interfaz: modo oscuro ---------- */

  /* Fondo: azul noche casi negro */
  --night:        var(--brand-navy);
  --night-2:      var(--brand-navy-2);
  --night-3:      var(--brand-navy-3);

  /* Texto */
  --cream:        var(--brand-cream);
  --cream-dim:    rgba(242, 236, 223, 0.68);
  --cream-faint:  rgba(242, 236, 223, 0.42);

  /* Texto sobre botones de color (igual en ambos temas) */
  --on-accent:    var(--brand-cream);

  /* Azul del logotipo */
  --blue:         var(--brand-blue);
  --blue-light:   var(--brand-blue-light);
  --blue-glow:    rgba(143, 169, 230, 0.28);

  /* Vino del logotipo */
  --wine:         var(--brand-wine);
  --wine-light:   var(--brand-wine-light);
  --wine-glow:    rgba(198, 90, 95, 0.32);

  /* Superficies con transparencia (tarjetas, nav, footer) */
  --surface:      rgba(10, 17, 34, 0.58);
  --surface-2:    rgba(17, 26, 49, 0.72);
  --surface-hi:   rgba(24, 36, 66, 0.78);
  --surface-solid: rgba(6, 10, 20, 0.96);

  /* Líneas finas */
  --line:         rgba(143, 169, 230, 0.16);
  --line-strong:  rgba(143, 169, 230, 0.34);
  --line-wine:    rgba(198, 90, 95, 0.38);

  /* Tipografía */
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-display:   clamp(2.6rem, 1.4rem + 5.4vw, 6.2rem);
  --fs-h2:        clamp(2rem, 1.3rem + 3vw, 3.9rem);
  --fs-h3:        clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-lead:      clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  --fs-body:      1rem;
  --fs-mono:      0.72rem;

  --track-mono:   0.22em;
  --track-wide:   0.28em;

  /* Forma */
  --radius:       3px;
  --radius-sm:    2px;
  --container:    1200px;
  --gutter:       clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section-y:    clamp(5rem, 3rem + 8vw, 10rem);
  --nav-h:        72px;

  /* Sombras y brillos */
  --shadow-card:  0 1px 0 rgba(242, 236, 223, 0.04) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --shadow-lift:  0 30px 70px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-strong), 0 0 40px -8px var(--blue-glow);
  --shadow-wine:  0 18px 40px -18px var(--wine-glow), 0 0 0 1px var(--line-wine);
  --text-shadow:  0 2px 36px rgba(0, 0, 0, 0.7);

  /* Viñeta */
  --vignette:     radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, rgba(3, 5, 10, 0.55) 78%, rgba(2, 3, 7, 0.92) 100%);

  /* Ajustes de imagen por tema */
  --mark-filter:  none;
  --picker-filter: invert(0.85);

  /* Movimiento */
  --ease:         cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur:          0.55s;
  --dur-slow:     1.1s;

  /* Capa de oscurecimiento de la escena (la actualiza interactions.js) */
  --scene-dim:    0;

  color-scheme: dark;
}

/* ---------- Interfaz: modo claro ---------- */

:root[data-theme='light'] {
  --night:        #f4efe5;
  --night-2:      #ebe4d6;
  --night-3:      #ddd4c2;

  --cream:        #111b34;
  --cream-dim:    rgba(17, 27, 52, 0.74);
  --cream-faint:  rgba(17, 27, 52, 0.52);

  --blue:         var(--brand-blue);
  --blue-light:   #2a4cb0;
  --blue-glow:    rgba(36, 71, 166, 0.18);

  --wine:         var(--brand-wine);
  --wine-light:   #a3333a;
  --wine-glow:    rgba(140, 28, 34, 0.2);

  --surface:      rgba(255, 252, 246, 0.62);
  --surface-2:    rgba(255, 252, 246, 0.8);
  --surface-hi:   rgba(255, 252, 246, 0.92);
  --surface-solid: rgba(246, 242, 234, 0.97);

  --line:         rgba(17, 27, 52, 0.12);
  --line-strong:  rgba(17, 27, 52, 0.26);
  --line-wine:    rgba(140, 28, 34, 0.32);

  --shadow-card:  0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 50px -32px rgba(17, 27, 52, 0.35);
  --shadow-lift:  0 30px 60px -30px rgba(17, 27, 52, 0.4), 0 0 0 1px var(--line-strong), 0 0 40px -10px var(--blue-glow);
  --text-shadow:  0 1px 28px rgba(255, 252, 246, 0.85);

  --vignette:     radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(221, 212, 194, 0.35) 85%, rgba(205, 194, 172, 0.6) 100%);

  /* El isotipo y el selector de fecha se ajustan al fondo claro */
  --mark-filter:  brightness(0.6) saturate(1.5);
  --picker-filter: none;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  min-height: 100vh;
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--blue-light);
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--wine);
  color: var(--on-accent);
}

:focus-visible {
  outline: 1px solid var(--blue-light);
  outline-offset: 3px;
}

[tabindex='-1']:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}