@layer tokens {
  :root {
    /* Color */
    --petroleo: #0A4558;
    --petroleo-hondo: #06303E;
    --acero: #7D8B92;
    --acero-oscuro: #4E5D65;   /* texto secundario sobre fondos claros (AA) */
    --acero-claro: #B9C4C9;    /* texto secundario sobre petróleo (AA) */
    --concreto: #E6E9E8;
    --cal: #F6F7F5;
    --tinta: #10242C;
    --senal: #F5B400;
    --blanco: #fff;

    /* Tipografía */
    --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
    --fs-small: 0.9375rem;
    --fs-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
    --fs-2: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
    --fs-3: clamp(2rem, 1.3rem + 2.7vw, 3.6rem);
    --fs-4: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem);
    --fs-hero: clamp(1.85rem, 0.9rem + 4.6vw, 4.4rem);
    --fs-figure: clamp(3rem, 1.8rem + 5vw, 6.5rem);

    /* Movimiento */
    --ease: cubic-bezier(.2, .7, .1, 1);
    --t-fast: 0.25s;
    --t-base: 0.6s;
    --t-slow: 1s;

    /* Espacio y retícula */
    --header-h: 4.5rem;
    --gutter: max(clamp(1.25rem, 5vw, 5rem), calc((100vw - 96rem) / 2));
    --col-gap: clamp(1rem, 2vw, 2rem);
    --section-y: clamp(4.5rem, 9vw, 9rem);
    --radius: 2px;
  }
}