:root{
/* ---- Brand ramp (from the Hay Equipo IA manual) ---- */
--blue-900:#00307D; /* Azul oscuro */
--blue-700:#024FCE; /* Azul intenso / eléctrico */
--blue-500:#07668B; /* Azul */
--cyan-400:#0CC0DF; /* Cyan */
--green-400:#36DD37; /* Verde acento */

/* Derived brand steps — interpolated within the ramp, never outside it */
--blue-950:#001C4C;
--blue-800:#013FA6;
--blue-600:#0559AC;
--cyan-500:#0A9CBB;
--cyan-300:#4FD6EC;
--cyan-200:#9BE8F6;
--cyan-100:#D6F5FB;
--green-500:#22B92A;
--green-200:#B6F3B6;

/* ---- Neutrals ---- */
--ink-900:#242424; /* Gris oscuro */
--ink-700:#3D3D3D;
--ink-500:#6B6F76;
--ink-300:#A9AEB6;
--ink-200:#D7DBE1;
--ink-100:#EDEFF3;
--cream:#FEFFE3; /* Blanco cálido */
--white:#FFFFFF;

/* ---- Semantic aliases ---- */
--text-strong:var(--blue-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-inverse:var(--white);
--text-brand:var(--blue-700);
--text-on-brand:var(--white);
--text-link:var(--blue-700);
--text-link-hover:var(--cyan-500);

--surface-page:var(--white);
--surface-page-warm:var(--cream);
--surface-card:var(--white);
--surface-subtle:var(--ink-100);
--surface-brand:var(--blue-700);
--surface-brand-soft:var(--cyan-100);
--surface-dark:var(--blue-950);
--surface-ink:var(--ink-900);

--border-subtle:var(--ink-200);
--border-strong:var(--ink-300);
--border-brand:var(--blue-700);
--border-on-dark:rgba(255,255,255,.18);

--accent-primary:var(--blue-700);
--accent-secondary:var(--cyan-400);
--accent-energy:var(--green-400);

--state-success:var(--green-500);
--state-success-soft:var(--green-200);
--state-info:var(--cyan-400);
--state-info-soft:var(--cyan-100);
--state-warning:#E8A317;
--state-warning-soft:#FDF0D2;
--state-danger:#D93B36;
--state-danger-soft:#FBE0DF;

/* Tinta de estado: el color del estado no tiene contraste suficiente
   sobre su propio fondo suave. Estos son los que van sobre *-soft. */
--state-success-ink:#12781A;
--state-warning-ink:#8A5D05;
--state-danger-ink:#96201C;

--focus-ring:var(--cyan-400);

/* ---- Gradients ---- */
--grad-brand:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 48%,var(--cyan-400) 100%); /* @kind color */
--grad-brand-soft:linear-gradient(135deg,#E8F1FF 0%,#DCF6FC 100%); /* @kind color */
--grad-deep:linear-gradient(160deg,#001C4C 0%,#00307D 55%,#024FCE 100%); /* @kind color */
--grad-cyan:linear-gradient(135deg,var(--blue-700) 0%,var(--cyan-400) 100%); /* @kind color */
--grad-energy:linear-gradient(135deg,var(--cyan-400) 0%,var(--green-400) 100%); /* @kind color */
--grad-text:linear-gradient(96deg,var(--cyan-400) 0%,var(--blue-700) 62%); /* @kind color */
--grad-glass:linear-gradient(140deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 100%); /* @kind color */
--grad-glass-dark:linear-gradient(140deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 100%); /* @kind color */

/* ---- Light bloom (radial washes behind glass) ---- */
--bloom-cyan:radial-gradient(circle at 50% 50%,rgba(12,192,223,.55) 0%,rgba(12,192,223,0) 68%); /* @kind color */
--bloom-blue:radial-gradient(circle at 50% 50%,rgba(2,79,206,.5) 0%,rgba(2,79,206,0) 68%); /* @kind color */
--bloom-green:radial-gradient(circle at 50% 50%,rgba(54,221,55,.4) 0%,rgba(54,221,55,0) 68%); /* @kind color */

/* ---- Paso nuevo en la rampa: CTA sobre oscuro ----
   #024FCE no tiene suficiente vibración sobre --blue-950.
   Se legaliza dentro de la rampa en vez de dejar que cada
   sección lo derive por su cuenta. */
--blue-400:#2D7FFF;

/* ---- Blanco de texto: nunca #FFF puro sobre oscuro ----
   Equivalente frío del blanco cálido, para una marca azul. */
--paper:#ECF2FF;
--paper-dim:#C4D2EA;
--paper-mute:#8B9BBB;
}

/* ================================================================
   SUPERFICIE OSCURA — re-mapeo semántico completo.
   Cualquier bloque marcado data-surface="dark" hereda todo esto;
   ningún componente necesita saber sobre qué fondo está.
   Regla dura: exactamente TRES superficies sobre oscuro —
   page, card (.06) y subtle (.03). Cualquier otro alfa es un bug.
   ================================================================ */
[data-surface="dark"]{
--text-strong:     var(--paper);
--text-body:       var(--paper-dim);
--text-muted:      var(--paper-mute);
--text-inverse:    var(--blue-900);
--text-brand:      var(--cyan-400);
--text-on-brand:   var(--white);
--text-link:       var(--cyan-300);
--text-link-hover: var(--cyan-200);

--surface-page:    var(--blue-950);
--surface-card:    rgba(255,255,255,.06);
--surface-subtle:  rgba(255,255,255,.03);
--surface-brand:   var(--blue-400);

--border-subtle:   rgba(255,255,255,.10);
--border-strong:   rgba(255,255,255,.20);
--border-brand:    var(--cyan-400);

--accent-primary:  var(--blue-400);

/* Elevación oscura: las sombras azules del sistema son
   invisibles sobre --blue-950. */
--shadow-xs:0 1px 2px   rgba(0,8,24,.40);
--shadow-sm:0 2px 8px   rgba(0,8,24,.45);
--shadow-md:0 8px 24px  rgba(0,8,24,.50);
--shadow-lg:0 18px 48px rgba(0,8,24,.55);
--shadow-xl:0 32px 80px rgba(0,8,24,.60);

color:var(--text-body);
background:var(--surface-page);
}