/* CHR · Tokens de diseño. Fuente: dirección D + decisiones del dueño (movimiento vivo, curva ease-out fuerte, radios rectos en controles). */
:root{
  /* Neutros con sesgo azul */
  --canvas:#F3F6FA; --surface:#FFFFFF; --surface-2:#E8EEF6;
  --line:#D9E0EA; --line-2:#C3CDDB; --line-3:#7F93AE;
  --ink:#0B1F3A; --text:#172A47; --muted:#4A5A72; --faint:#5A6A83;

  /* Marino de marca */
  --navy:#12365F; --navy-2:#0E2A4B; --navy-3:#0A2039; --navy-tint:#E3ECF8;
  --on-navy:#FFFFFF; --on-navy-2:#B7C9E2; --link:#1F5FA8;

  /* Naranja de énfasis */
  --ember:#BD4C15; --ember-2:#A6420F; --ember-3:#8F3709; --ember-tint:#FBEAE0; --ember-on-navy:#F4A070;

  /* Semánticos (texto sobre su tinte >= 5.4:1) */
  --ok:#12694A; --ok-tint:#E1F4EA;
  --warn:#8A5208; --warn-tint:#FBEFD9;
  --bad:#B42318; --bad-tint:#FCE4E1; --bad-2:#8E1C12; --bad-tint-2:#F8D2CD;
  --info:#1F5FA8; --info-tint:#E3ECF8;

  /* Tipografía */
  --font-display:'Manrope','Manrope Fallback',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Plex Fallback',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,Menlo,monospace;

  /* Espaciado base 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-24:96px;

  /* Radios. Decisión: botones, botones de icono, chips de acción y campos a --r-1 (6 px).
     Tarjetas, popovers y tabla a --r-3; mosaico, panel y hoja inferior a --r-4. Píldora solo en chips de filtro, switch y pastilla de la barra inferior. */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px; --r-pill:999px;
  --r-ctl:var(--r-1);

  /* Sombras tintadas con el marino */
  --shadow-1:0 1px 2px rgba(11,31,58,.06),0 1px 3px rgba(11,31,58,.04);
  --shadow-2:0 2px 4px rgba(11,31,58,.05),0 12px 28px -12px rgba(11,31,58,.18);
  --shadow-3:0 4px 8px rgba(11,31,58,.06),0 24px 56px -20px rgba(11,31,58,.28);
  --shadow-sheet:0 -8px 40px rgba(11,31,58,.22);
  --focus:0 0 0 2px var(--surface),0 0 0 4px var(--ember);
  --scrim:rgba(11,31,58,.4);

  /* Movimiento. Decisión: intensidad viva y curva de entrada ease-out fuerte. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:140ms; --t-fast:200ms; --t-ui:280ms; --t-overlay:340ms; --t-sheet:440ms; --t-hero:820ms;
  --press-scale:.97;

  /* Capas */
  --z-sticky:40; --z-tabbar:45; --z-fab:46; --z-island:50; --z-drawer:60; --z-toast:80; --z-skip:100;
}