/* ============================================================
   OxxRoad — Design tokens (Cinematic Dark Rally)
   3–5 colores, tipografía de pareja, escala fluida.
   ============================================================ */
:root {
  /* —— Color —— */
  --ink: #07090d;          /* fondo base, casi negro */
  --ink-2: #0a0d12;
  --panel: #14181d;        /* paneles gunmetal */
  --panel-2: #0b0f14;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --fg: #e7edf3;           /* texto principal */
  --fg-dim: #9aa3ad;       /* secundario */
  --fg-mute: #5d6675;      /* terciario / micro */

  --orange: #ff7a1a;       /* ACENTO único — el "rastro" */
  --orange-soft: #ffa45c;
  --orange-deep: #c94a00;
  --orange-rgb: 255, 122, 26;

  --gunmetal-1: #cdd4dc;   /* metal claro (logo) */
  --gunmetal-2: #6b7480;   /* metal medio */
  --gunmetal-3: #2a2f37;   /* metal sombra */

  --cream: #efe6cf;        /* solo sección Roadbook */

  /* —— Tipografía —— */
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* escala fluida (min .. max) */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.0vw, 2.1rem);
  --step-3:  clamp(2.0rem, 1.6rem + 2.0vw, 3.4rem);
  --step-4:  clamp(2.8rem, 2.0rem + 4.0vw, 5.6rem);
  --step-5:  clamp(3.6rem, 2.2rem + 7.0vw, 8.5rem);

  /* —— Espaciado / radios / sombras —— */
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 2.2rem);
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 60px rgba(var(--orange-rgb), 0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}