/* ===========================================================================
   Drive Forge — Design tokens
   ADN visual heredado del sitio actual: negro #111 + amarillo ácido #FFE500
   + Space Grotesk (display) / Inter (texto). Estética industrial premium.
   =========================================================================== */

/* --- Fuentes auto-hospedadas (subset latin). Sin CDN de Google Fonts:
       mejor LCP y sin transferencia de IP a Google (cumplimiento RGPD). --- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/spacegrotesk-400.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/spacegrotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/spacegrotesk-600.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/spacegrotesk-700.woff2) format("woff2"); }

:root {
  /* --- Superficies (negro técnico, profundidad por capas) --- */
  --bg:            #111111;  /* fondo base (igual que la demo) */
  --bg-elev:       #181818;  /* secciones elevadas / alternas */
  --surface:       #1b1c1e;  /* tarjetas */
  --surface-2:     #202224;  /* tarjetas hover / inputs */
  --line:          #2a2c2f;  /* hairlines */
  --line-strong:   #3a3d42;  /* bordes marcados */

  /* --- Tinta --- */
  --ink:           #f5f6f7;  /* texto principal */
  --ink-2:         #b6bbc2;  /* texto secundario */
  --ink-3:         #8b919a;  /* muted / metadatos (AA con margen sobre tarjetas) */

  /* --- Acento de marca (amarillo forja/hazard) --- */
  --accent:        #FFE500;
  --accent-600:    #E6CF00;  /* hover */
  --accent-700:    #c7b400;
  --on-accent:     #111111;  /* texto sobre amarillo */
  --accent-glow:   rgba(255, 229, 0, 0.18);
  --accent-line:   rgba(255, 229, 0, 0.55); /* líneas de escaneo */

  /* --- Tipografía --- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* escala tipográfica fluida */
  --fs-eyebrow: 0.78rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 4.2vw, 4.6rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);

  /* --- Radios --- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Sombras / glow --- */
  --shadow-sm: 0 2px 10px -6px rgba(0, 0, 0, 0.6);
  --shadow:    0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 1px var(--line);
  /* Profundidad "premium" en capas: reborde de luz cenital + sombra proyectada suave.
     Se usan en tarjetas y superficies elevadas para dar sensación de material. */
  --shadow-card:       inset 0 1px 0 0 rgba(255,255,255,0.04), 0 14px 30px -20px rgba(0,0,0,0.8);
  --shadow-card-hover: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 26px 50px -24px rgba(0,0,0,0.9);
  /* Luz cenital sutil para el tope de superficies (gradiente discreto, no llamativo) */
  --surface-hi: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  /* movimiento "mecánico / de precisión" (no plantilla) */
  --ease-machine: cubic-bezier(0.18, 0.84, 0.28, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-scan: cubic-bezier(0.65, 0, 0.25, 1);
  --t-press: 90ms;
  --t-machine: 260ms;

  /* --- Rejilla técnica de fondo --- */
  --grid: rgba(255, 255, 255, 0.035);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}