/*
  DESIGN TOKENS — Manual de Inmunología
  Mismo sistema (tipografía, espaciado, arquitectura de sitio) que el resto
  de la colección, con paleta propia: acento cerúleo "azul inmunológico"
  (el azul de un dot-plot de citometría de flujo, de un anticuerpo marcado
  con FITC, del suero en un tubo de laboratorio) sobre un papel frío con
  velo gris-azulado apenas perceptible — distinto del carmesí de Fisiología,
  el ámbar de Bioquímica y el índigo violáceo de Comprensión de Textos — y
  una escala semántica de callouts que no repite ningún hex del resto de
  la colección.
*/

:root {
  color-scheme: light;

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.65;
  --lh-relaxed: 1.8;

  /* ---- Paleta base (modo claro, "papel" con leve velo gris-azulado frío) ---- */
  --color-paper: #F5F9FB;
  --color-paper-raised: #FFFFFF;
  --color-paper-alt: #E4EFF4;
  --color-ink: #12242C;
  --color-ink-soft: #44616D;
  --color-ink-faint: #7C99A3;
  --color-line: #D2E3EA;
  --color-line-strong: #AFCCD8;

  /* ---- Acento de la colección (Inmunología = cerúleo "azul inmunológico") ---- */
  --accent-primary: #0A6E96;
  --accent-primary-ink: #054A66;
  --accent-primary-soft: #DCEEF5;

  /* ---- Semántica (callouts) — paleta propia, sin reciclar hex de otros manuales ---- */
  --color-info: #2B6F9E;      --color-info-soft: #E1EFF7;      --color-info-ink:#163F5C;
  --color-warning: #B06A12;   --color-warning-soft: #FBEBD5;   --color-warning-ink:#6E4009;
  --color-danger: #AE3B44;    --color-danger-soft: #F9E4E5;    --color-danger-ink:#6E2229;
  --color-success: #357A55;   --color-success-soft: #E1F1E7;   --color-success-ink:#1F4E33;
  --color-tip: #1C8C8C;       --color-tip-soft: #DEF3F3;       --color-tip-ink:#0D4F4F;
  --color-exam: #6A4FA6;      --color-exam-soft: #EDE7F9;      --color-exam-ink:#402F6B;

  /* ---- Espaciado ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ---- Forma / profundidad ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(18,36,44,.05), 0 6px 20px rgba(18,36,44,.07);
  --shadow-hover: 0 10px 30px rgba(18,36,44,.12);
  --shadow-inset: inset 0 0 0 1px rgba(18,36,44,.06);

  /* ---- Layout ---- */
  --max-content: 760px;
  --max-wide: 1240px;
  --sidebar-w: 272px;
  --toc-w: 232px;
  --header-h: 64px;

  --ease: cubic-bezier(.4,0,.2,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #0D1B21;
  --color-paper-raised: #142832;
  --color-paper-alt: #1B323D;
  --color-ink: #E3F1F6;
  --color-ink-soft: #9DBFC9;
  --color-ink-faint: #698992;
  --color-line: #1F3944;
  --color-line-strong: #2C4C58;

  --accent-primary: #5EC2E8;
  --accent-primary-ink: #C8ECFA;
  --accent-primary-soft: #123240;

  --color-info: #7EC2EA;      --color-info-soft: #16303E;      --color-info-ink:#CDE9F7;
  --color-warning: #E2A362;   --color-warning-soft: #382712;   --color-warning-ink:#F6D6AE;
  --color-danger: #E68B90;    --color-danger-soft: #3B2023;    --color-danger-ink:#F9CDD0;
  --color-success: #86CDA0;   --color-success-soft: #163021;   --color-success-ink:#C9EDD5;
  --color-tip: #6BD4D4;       --color-tip-soft: #0F3232;       --color-tip-ink:#BDEEEE;
  --color-exam: #B39EE0;      --color-exam-soft: #241D3B;      --color-exam-ink:#DDD1F4;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --shadow-hover: 0 10px 30px rgba(0,0,0,.45);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: #0D1B21;
    --color-paper-raised: #142832;
    --color-paper-alt: #1B323D;
    --color-ink: #E3F1F6;
    --color-ink-soft: #9DBFC9;
    --color-ink-faint: #698992;
    --color-line: #1F3944;
    --color-line-strong: #2C4C58;

    --accent-primary: #5EC2E8;
    --accent-primary-ink: #C8ECFA;
    --accent-primary-soft: #123240;

    --color-info: #7EC2EA;      --color-info-soft: #16303E;      --color-info-ink:#CDE9F7;
    --color-warning: #E2A362;   --color-warning-soft: #382712;   --color-warning-ink:#F6D6AE;
    --color-danger: #E68B90;    --color-danger-soft: #3B2023;    --color-danger-ink:#F9CDD0;
    --color-success: #86CDA0;   --color-success-soft: #163021;   --color-success-ink:#C9EDD5;
    --color-tip: #6BD4D4;       --color-tip-soft: #0F3232;       --color-tip-ink:#BDEEEE;
    --color-exam: #B39EE0;      --color-exam-soft: #241D3B;      --color-exam-ink:#DDD1F4;

    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --shadow-hover: 0 10px 30px rgba(0,0,0,.45);
    --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.06);
  }
}