/* ==========================================================================
   DESIGN TOKENS · Endoscopía HGM
   Sistema de variables CSS para todo el proyecto.
   ========================================================================== */

:root {
  /* ---------- COLOR · INDIGO (primario, heredado del logo) ---------- */
  --indigo-900: #1a1240;
  --indigo-800: #251a5c;
  --indigo-700: #332478;
  --indigo-600: #4a3590;
  --indigo-500: #6b4fb8;
  --indigo-100: #ede9f7;
  --indigo-50:  #f6f4fb;

  /* ---------- COLOR · NEUTROS CLÍNICOS ---------- */
  --ink-900: #0a0a14;
  --ink-700: #3a3a48;
  --ink-500: #6e6e80;
  --ink-300: #9b9bab;
  --line-200: #dcdce4;
  --line-100: #eeeef2;
  --bone:     #fafafa;
  --paper:    #ffffff;

  /* ---------- COLOR · ACENTOS DIAGNÓSTICOS (uso puntual ≤ 5%) ---------- */
  --vital:  #00b4a6;  /* turquesa: estados activos */
  --alert:  #d94854;  /* rojo: alertas, ubicación */
  --signal: #f4b942;  /* ámbar: badges destacados */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* ---------- ESPACIADO (8pt grid) ---------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* ---------- SHADOWS ---------- */
  --shadow-card: 0 1px 2px rgba(26,18,64,.04), 0 8px 24px -8px rgba(26,18,64,.08);
  --shadow-elevated: 0 16px 40px -12px rgba(26,18,64,.18);
  --shadow-fab: 0 12px 30px rgba(26,18,64,.4);

  /* ---------- TRANSITIONS ---------- */
  --t-fast: .2s ease;
  --t-base: .25s ease;
  --t-slow: .35s cubic-bezier(.4, 0, .2, 1);

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-padding: clamp(20px, 4vw, 48px);

  /* ---------- Z-INDEX ---------- */
  --z-nav: 100;
  --z-fab: 200;
  --z-modal: 1000;
}