@layer tokens {
  :root {
    /* Sigue el SO por defecto; el toggle fuerza un esquema (ver más abajo). */
    color-scheme: light dark;

    /* ---- Primitivas de marca (constantes en ambos temas) ---- */
    --brand-blue: #004D8B;
    --brand-blue-bright: #0079FF;
    --brand-gold: #FFD51C;
    --brand-gold-ink: #1A1400;
    --omni-blue: #02468F;
    --omni-orange: #E16B17;

    /* ---- Tokens semánticos: light-dark(claro, oscuro) ---- */
    --bg:           light-dark(#FFFFFF, #0A1626);
    --surface:      light-dark(#F4F7FA, #0F2034);
    --surface-2:    light-dark(#E8EEF4, #16314D);
    --border:       light-dark(#D8E1EA, #233A52);
    --text:         light-dark(#0E1A24, #E7EFF7);
    --text-muted:   light-dark(#43525F, #9FB3C7);
    --primary:      light-dark(#004D8B, #2D8CFF);
    --primary-hover:light-dark(#013C6E, #5AA6FF);
    /* Fondo de botones primarios: en oscuro, azul mas profundo para AA con texto blanco
       (el #2D8CFF se reserva para textos/eyebrows sobre fondo oscuro). */
    --primary-strong:       light-dark(#004D8B, #1862C7);
    --primary-strong-hover: light-dark(#013C6E, #2D7BE0);
    --on-primary:   #FFFFFF;
    --accent:       var(--brand-gold);
    --accent-ink:   var(--brand-gold-ink);
    --link:         light-dark(#005CD1, #7CC0FF);
    --focus:        light-dark(#0079FF, #7CC0FF);
    --shadow-color: light-dark(rgba(8, 35, 66, .14), rgba(0, 0, 0, .55));

    /* ---- Sombras / radios ---- */
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow-md: 0 6px 22px var(--shadow-color);
    --shadow-lg: 0 18px 50px var(--shadow-color);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* ---- Escala de espaciado ---- */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;

    /* ---- Tipografía fluida (clamp) ---- */
    --step--1: clamp(.83rem, .80rem + .15vw, .92rem);
    --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
    --step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.5rem);
    --step-2:  clamp(1.44rem, 1.27rem + .8vw, 2rem);
    --step-3:  clamp(1.73rem, 1.45rem + 1.4vw, 2.7rem);
    --step-4:  clamp(2.07rem, 1.6rem + 2.4vw, 3.5rem);
    --step-5:  clamp(2.4rem, 1.7rem + 3.6vw, 4.6rem);

    /* ---- Fuentes ---- */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

    --container: 1180px;
    --header-h: 4.5rem;
  }

  /* El toggle fija un esquema concreto; light-dark() resuelve en consecuencia. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}