/* Design system AFOCAT Olga - tokens unificados (antes: 7 archivos con @import encadenado). */
/* La fuente Hanken Grotesk se carga con <link> directo en el <head>, no con @import. */
:root{
/* base */
--navy-900:#13172C;--green-400:#00FF7F;--lavender-50:#EDF0FF;--gray-200:#E5E7EB;--ink-950:#03050F;--gray-500:#6D6E74;--indigo-200:#CCD1EE;--white:#FFFFFF;
--flame-500:#F81E42;--orange-500:#FF6200;
/* semánticos */
--color-primary:var(--navy-900);--color-accent:var(--green-400);
--surface-page:var(--lavender-50);--surface-card:var(--white);--surface-elevated:var(--gray-200);--surface-inverse:var(--navy-900);
--text-body:var(--ink-950);--text-muted:var(--gray-500);--text-inverse:var(--lavender-50);--text-on-accent:var(--ink-950);
--border-default:var(--indigo-200);--border-strong:var(--navy-900);
--state-success:var(--green-400);--state-danger:var(--flame-500);--state-warning:var(--orange-500);
--gradient-brand:linear-gradient(96deg,var(--flame-500) 0%,var(--orange-500) 100%);
--focus-ring-color:var(--navy-900);
}
:root{
--font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
/* escala 40 / 32 / 24 / 18 / 16 / 14 / 12 */
--size-h1:40px;--lh-h1:1.2;/* @kind font */
--size-h2:32px;--lh-h2:1.25;/* @kind font */
--size-h3:18px;--lh-h3:1.33;/* @kind font */--track-h3:0.2px;
--size-lead:24px;--lh-lead:1.4;/* @kind font */
--size-body:16px;--lh-body:1.67;/* @kind font */
--size-small:14px;--lh-small:1.5;/* @kind font */
--size-caption:12px;--lh-caption:1.4;/* @kind font */
--weight-regular:400;--weight-medium:500;--weight-bold:700;
}
:root{
/* escala de 4px: 4,8,12,16,20,24,32,56 */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:56px;
/* radios: controles sutiles, botones píldora */
--radius-control:6px;--radius-card:12px;--radius-pill:999px;
--container-max:1765px;--container-pad:24px;
--z-element:10;/* @kind other */--z-nav:10000;/* @kind other */
}
:root{
--duration-fast:0.2s;/* @kind other */--duration-base:0.3s;/* @kind other */
--ease-standard:cubic-bezier(0.4,0,0.2,1);/* @kind other */--ease-out:cubic-bezier(0.16,1,0.3,1);/* @kind other */
}
body{margin:0;font-family:var(--font-sans);font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1{font-size:var(--size-h1);line-height:var(--lh-h1);font-weight:var(--weight-bold);margin:0}
h2{font-size:var(--size-h2);line-height:var(--lh-h2);font-weight:var(--weight-bold);margin:0}
h3{font-size:var(--size-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);font-weight:var(--weight-bold);margin:0}
p{margin:0}
a{color:var(--text-body);text-decoration:underline;text-underline-offset:3px;transition:opacity var(--duration-fast) var(--ease-standard)}
a:hover{opacity:0.7}
:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}
::selection{background:var(--green-400);color:var(--ink-950)}