/* ==========================================================================
   Stenko — tokens de marca
   Paleta y tipografía fijas. No inventar colores fuera de esta lista:
   todo acento sale del gradiente ámbar -> teal (amanecer -> mediodía).
   ========================================================================== */

:root {
  /* Paleta oficial */
  --night:        #0D1130;  /* azul noche — color de marca (logo, superficies) */
  --night-2:      #111633;  /* azul secundario */
  --amber:        #FFA53E;  /* ámbar amanecer — acento cálido */
  --teal:         #4FD1C5;  /* teal día — acento frío */
  --bone:         #F5F6F8;  /* blanco hueso — texto */

  /* Fondo de página, por debajo del azul noche de marca.
     El #0D1130 se conserva como color de marca y de superficies; el lienzo va
     más oscuro para que el texto y el arco de luz ganen contraste. */
  --void:         #04060F;
  --void-2:       #070A1A;
  --void-3:       #0B0B1E;  /* extremo cálido del ciclo de día */

  /* Derivados estructurales (del propio SVG del logo) */
  --line:         #3A4270;  /* línea de horizonte / nodos */
  --line-soft:    rgba(58, 66, 112, 0.5);
  --surface:      rgba(10, 13, 33, 0.72);
  --bone-60:      rgba(245, 246, 248, 0.68);
  --bone-42:      rgba(245, 246, 248, 0.50);
  --trace-dim:    #2B3159;  /* estado "sin trazar" del texto */

  /* El hilo conductor: un día completo */
  --arc: linear-gradient(90deg, var(--amber) 0%, var(--teal) 100%);

  /* Fondo de página. JS lo interpola de noche -> amanecer con el scroll. */
  --bg: var(--void);

  /* Tipografía */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1.00vw, 2.25rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.00vw, 3.25rem);
  --step-4:  clamp(2.60rem, 1.80rem + 4.00vw, 5.50rem);
  --step-5:  clamp(3.40rem, 1.80rem + 8.00vw, 9.00rem);

  /* Ritmo */
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --container: 76rem;
  --section-y: clamp(6rem, 12vh, 10rem);

  --radius:    18px;  /* mismo rx del contenedor del logo */
  --radius-sm: 10px;

  --ease-arc: cubic-bezier(0.22, 0.61, 0.36, 1);
}