/* ==========================================================================
   Apex Consulting · v3 "Amanecer en el Ávila"
   La página arranca de noche sobre Caracas y va amaneciendo mientras se sube:
   el cielo (site.js) interpola entre las paradas de abajo según la sección.
   Marca: perfil del Ávila en línea continua + marcador rojo en el pico
   (rojo señal del manual, ~#e8380d = oklch 63% .21 35).
   La versión anterior (v2) quedó en index-v2.html + tokens-v2.css.
   ========================================================================== */
:root {
  /* ---- cielo: valor inicial (noche). site.js lo reescribe con el scroll ---- */
  --sky-top: oklch(9% 0.025 262);
  --sky-mid: oklch(12% 0.035 262);
  --sky-low: oklch(16% 0.045 264);
  --ridge-far:   oklch(13% 0.035 264);
  --ridge-mid:   oklch(10.5% 0.03 263);
  --ridge-front: oklch(7.5% 0.022 262);

  /* ---- tinta sobre cielo oscuro ---- */
  --ink:   oklch(97% 0.008 250);
  --ink-2: oklch(85% 0.018 255);   /* texto secundario — 11:1 sobre la noche */
  --ink-3: oklch(70% 0.028 258);   /* etiquetas — 6:1 */
  --ink-4: oklch(50% 0.035 260);   /* trazos y reglas fuertes */
  --line:        oklch(100% 0 0 / 0.1);
  --line-strong: oklch(100% 0 0 / 0.2);
  --glass:       oklch(100% 0 0 / 0.04);
  --glass-2:     oklch(100% 0 0 / 0.075);

  /* paneles de los demos: casi opacos a propósito — nada de backdrop-filter
     encima de un canvas WebGL que cambia cada cuadro */
  --panel:       oklch(15.5% 0.032 262 / 0.9);
  --panel-solid: oklch(16.5% 0.032 262);
  --panel-2:     oklch(20% 0.035 262);
  --shadow-panel: 0 2.5rem 5rem -2rem oklch(0% 0 0 / 0.65), 0 0 0 1px oklch(100% 0 0 / 0.04) inset;

  /* ---- marca ---- */
  --red:      oklch(63% 0.21 35);
  --red-hi:   oklch(72% 0.18 38);    /* rojo para texto chico sobre oscuro (≥ 5:1) */
  --red-btn:  oklch(56% 0.2 33);     /* relleno de botón: 5:1 con texto blanco */
  --red-btn-hover: oklch(60% 0.21 34);
  --red-deep: oklch(45% 0.17 32);
  --red-glow: oklch(63% 0.21 35 / 0.4);

  /* ---- semántica de los demos: ámbar = algo anda mal, menta = resuelto.
     El rojo queda para la marca, así "rojo" nunca significa "error" aquí ---- */
  --warn:    oklch(82% 0.15 78);
  --warn-bg: oklch(82% 0.15 78 / 0.13);
  --warn-line: oklch(82% 0.15 78 / 0.4);
  --ok:      oklch(84% 0.13 168);
  --ok-bg:   oklch(84% 0.13 168 / 0.12);
  --ok-line: oklch(84% 0.13 168 / 0.4);
  --scan:    oklch(92% 0.06 220);

  /* ---- amanecer ---- */
  --sun-core: oklch(98% 0.05 95);
  --sun-mid:  oklch(90% 0.12 75);
  --sun-edge: oklch(76% 0.17 50);

  /* ---- día (pie de página) ---- */
  --day-paper: oklch(96.5% 0.013 78);
  --day-paper-2: oklch(92% 0.018 70);
  --day-ink:   oklch(18% 0.03 262);
  --day-ink-2: oklch(40% 0.03 262);
  --day-line:  oklch(18% 0.03 262 / 0.14);

  /* ---- papeles de los documentos fiscales ---- */
  --receipt:     oklch(96.5% 0.012 88);
  --receipt-ink: oklch(26% 0.02 60);
  --voucher:     oklch(98% 0.006 250);
  --voucher-ink: oklch(24% 0.03 262);
  --voucher-dim: oklch(48% 0.03 262);

  /* ---- metal de dispositivos ---- */
  --metal-hi: oklch(52% 0.01 260);
  --metal:    oklch(30% 0.012 260);
  --metal-lo: oklch(18% 0.012 260);
  --screen:   oklch(11% 0.02 262);

  /* ---- tipografía: Mona Sans (ancha y pesada = eco del wordmark APEX).
     Las pantallas de ejemplo usan la fuente del sistema, como el software real ---- */
  --font-sans: "Mona Sans", "Segoe UI", system-ui, sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1.0625rem;
  --fs-lg:  1.25rem;
  --fs-xl:  clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h3:  clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  --fs-h2:  clamp(2.1rem, 1.1rem + 2.9vw, 4rem);
  --fs-h1:  clamp(2.75rem, 0.9rem + 5.6vw, 7rem);
  --fs-mega: clamp(3.25rem, 0.5rem + 9.5vw, 11.5rem);

  /* ---- espacio (4 pt) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --nav-h: 4.5rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  /* ---- movimiento ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur:      320ms;
  --dur-slow: 700ms;

  --z-sky: 0;
  --z-main: 1;
  --z-nav: 50;
}