/* amedi · tokens · v1.0 · julio 2026
 * fuente única de verdad. si un valor en main.css, slides.css o en una
 * sección no viene de un token de acá, se considera deuda.
 *
 * marca: Amedi · salud, citas e historia clínica · Caracas.
 * tagline: "Médicos cerca de ti".
 * adn visual: cruz paramédica + venda (isotipo), degradados petroleo→menta→verde,
 * geometría redondeada, hexágono heredado del isologo. cuidado, no frialdad. */

:root {
  /* ───────────────────────────── color · marca ─────────────────────────────
   * los cinco colores del manual de marca. hex exactos. */
  --noche:    #012030;   /* rgb 1 32 48     · cmyk 100 78 52 65 — ancla · tinta · superficie oscura */
  --petroleo: #13678A;   /* rgb 19 103 138  · cmyk 87 48 28 12  — acento accesible · enlaces · energía */
  --menta:    #45C4B0;   /* rgb 69 196 176  · cmyk 65 0 40 0    — la venda del isotipo · highlights · sobre noche */
  --verde:    #9AEBA3;   /* rgb 154 235 163 · cmyk 43 0 49 0    — vanguardia · acentos sobre noche */

  /* variantes derivadas · misma familia, sin colores nuevos (derived) */
  --noche-soft:    #16394C;
  --noche-deep:    #001420;
  --petroleo-soft: #D9EAF2;
  --petroleo-deep: #0E4D68;
  --menta-soft:    #E0F6F2;
  --menta-deep:    #2E9A89;
  --verde-soft:    #EAFBEC;
  --verde-deep:    #6FC97F;

  /* ───────────────────────────── color · superficies ─────────────────────── */
  --bg:       #FFFFFF;   /* lienzo principal claro */
  --hueso:    #F5F5F5;   /* el gris claro oficial del manual · fondo de página alterno */
  --paper:    #EAF2F1;   /* bloques editoriales · cards suaves (derived) */
  --noche-bg: #012030;   /* superficie oscura de marca · hero, slides, firma */

  /* ───────────────────────────── color · tinta ────────────────────────────
   * sobre superficies claras la tinta es noche (no negro puro). */
  --ink:       #012030;   /* texto principal sobre claro */
  --ink-soft:  #33505E;   /* texto secundario (derived) */
  --muted:     #6E8794;   /* metadata · captions (derived) */

  /* tinta inversa · sobre noche */
  --on-noche:        #FFFFFF;
  --on-noche-soft:   #BFD8DC;  /* derived */
  --on-noche-accent: #45C4B0;  /* menta como acento sobre noche */

  /* ───────────────────────────── color · líneas ───────────────────────────── */
  --line:         #D6E2E2;  /* derived */
  --line-soft:    #E8F0EF;  /* derived */
  --line-onnoche: rgba(255,255,255,0.16);

  /* ───────────────────────────── color · acento semántico ──────────────────
   * "acento" por defecto = petroleo (AA sobre claro). la menta es fill y
   * highlight, no texto sobre blanco (contraste insuficiente). */
  --accent:      var(--petroleo);
  --accent-soft: var(--menta-soft);
  --accent-deep: var(--petroleo-deep);

  /* ───────────────────────────── color · estados ───────────────────────────
   * derivados de la paleta donde se puede; danger es derivado — amedi no
   * tiene rojo de marca. todos validados a contraste AA sobre claro. */
  --state-success:      #2F7A4F;
  --state-success-soft: #DDF3E6;
  --state-warning:      #B6791A;
  --state-warning-soft: #F7ECCF;
  --state-danger:       #C0392B;  /* derived */
  --state-danger-soft:  #F6DEDA;  /* derived */
  --state-info:         var(--petroleo);
  --state-info-soft:    var(--petroleo-soft);

  /* ───────────────────────────── degradados · adn de marca ─────────────────
   * regla del manual: degradados solo entre pares contiguos de la paleta
   * (noche→petroleo, petroleo→menta, menta→verde, verde→claro). */
  --grad-marca:      linear-gradient(120deg, var(--petroleo) 0%, var(--menta) 55%, var(--verde) 100%);
  --grad-cool:       linear-gradient(120deg, var(--noche) 0%, var(--petroleo) 100%);
  --grad-fresh:      linear-gradient(120deg, var(--menta) 0%, var(--verde) 100%);
  --grad-petroleo:   linear-gradient(120deg, var(--petroleo-deep) 0%, var(--petroleo) 100%);
  --grad-hero:       radial-gradient(120% 120% at 18% 12%, var(--noche-soft) 0%, var(--noche) 45%, var(--noche-deep) 100%);
  --grad-menta-glow: radial-gradient(60% 80% at 80% 20%, rgba(69,196,176,0.30) 0%, rgba(69,196,176,0) 70%);

  /* ───────────────────────────── tipografía · familias ─────────────────────
   * manual: Parkinsans (títulos) + Inter (párrafos). amedi NO tiene serif ni
   * monospace — el rol --serif del engine sirve Inter (body editorial) y el
   * rol --mono sirve Inter con cifras tabulares (metadata · pills · código). */
  --display: 'Parkinsans', system-ui, -apple-system, sans-serif;
  --titulo:  'Parkinsans', system-ui, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;       /* UI / texto sans */
  --serif:   'Inter', system-ui, sans-serif;                      /* body editorial · amedi no tiene serif */
  --label:   'Parkinsans', system-ui, sans-serif;                 /* eyebrows / labels */
  --mono:    'Inter', system-ui, sans-serif;                      /* metadata/código · cifras tnum */

  /* peso · parkinsans variable cubre 300–800 */
  --fw-thin:     300;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    800;

  /* ───────────────────────────── tipografía · escala ───────────────────────
   * base 16px · ratio editorial. display amplio por el carácter geométrico. */
  --text-2xs:     10px;
  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-md:      17px;
  --text-lg:      19px;
  --text-xl:      24px;
  --text-2xl:     30px;
  --text-3xl:     40px;
  --text-4xl:     54px;
  --text-display: clamp(52px, 6vw, 88px);

  /* line-height */
  --lh-tight:   1.02;
  --lh-snug:    1.16;
  --lh-base:    1.55;
  --lh-relaxed: 1.62;

  /* letter-spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.025em;
  --tracking-snug:     -0.015em;
  --tracking-base:      0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;  /* labels del engine en caps */

  /* ───────────────────────────── spacing · base 4px ───────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ───────────────────────────── borde ──────────────────────────────────── */
  --bw:       1px;
  --bw-thick: 2px;
  --bw-hair:  0.5pt;

  /* ───────────────────────────── radio ────────────────────────────────────
   * esquinas redondeadas · coherente con el wordmark geométrico redondeado. */
  --r-sm:   6px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ───────────────────────────── opacidad ─────────────────────────────────── */
  --o-faint:  0.4;
  --o-soft:   0.55;
  --o-mid:    0.7;
  --o-strong: 0.85;

  /* ───────────────────────────── sombra · sutil, fría ──────────────────────
   * sombras discretas tintadas a noche — coherentes con la paleta. */
  --shadow-sm: 0 1px 2px rgba(1,32,48,0.06);
  --shadow-md: 0 6px 20px rgba(1,32,48,0.10);
  --shadow-lg: 0 18px 48px rgba(1,32,48,0.16);
  --shadow-glow-menta: 0 8px 32px rgba(69,196,176,0.28);

  /* ───────────────────────────── motion · timings ──────────────────────────
   * movimiento presente pero con propósito — curación, no urgencia. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 0.6, 0);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-base:    260ms;
  --duration-slow:    420ms;
  --duration-slower:  640ms;

  /* ───────────────────────────── anchos de contenedor ─────────────────────── */
  --max-w-prose:   660px;
  --max-w-content: 1120px;
  --max-w-frame:   1320px;

  /* ───────────────────────────── z-index · escala discreta ────────────────── */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;

  /* ───────────────────────────── breakpoints · referencia ─────────────────── */
  --bp-sm: 640px;
  --bp-md: 880px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;

  /* ───────────────────────────── focus ring ───────────────────────────────
   * nunca outline:none sin reemplazo. anillo en menta-deep para contraste. */
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--menta-deep);
  --focus-ring-offset: 2px;
}

/* a11y · respeta preferencia del usuario · el movimiento no es obligatorio */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* a11y · focus visible global */
:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}