/*
  DESIGN TOKENS — Manual de Cirugía General
  Mismo sistema (tipografía, espaciado, arquitectura de sitio) que el resto
  de la colección, con la paleta "azul marino / celeste quirúrgico" ya
  establecida en la versión anterior de este mismo manual (libro HTML de
  una sola pieza) — se continúa esa identidad en vez de inventar una nueva,
  incluyendo la misma escala semántica de cajas didácticas (clave, alto
  rendimiento, trampa de examen, error frecuente, perla clínica).
*/

: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 de quirófano" blanco con tinte celeste) ---- */
  --color-paper: #F3F8FB;
  --color-paper-raised: #FFFFFF;
  --color-paper-alt: #E6F1F9;
  --color-ink: #14202C;
  --color-ink-soft: #46586B;
  --color-ink-faint: #7C8CA0;
  --color-line: #D3E3EE;
  --color-line-strong: #B9D0E0;

  /* ---- Acento de la colección (Cirugía General = azul marino / celeste) ---- */
  --accent-primary: #1C5A82;
  --accent-primary-ink: #0B2E47;
  --accent-primary-soft: #E6F1F9;

  /* ---- Semántica (callouts) — continúa la paleta del manual previo:
         clave=azul, alto rendimiento=oro, trampa=violeta, error=rojo, perla=verde azulado ---- */
  --color-info: #1C5A82;      --color-info-soft: #E1EEF6;      --color-info-ink:#0B2E47;
  --color-warning: #B5651D;   --color-warning-soft: #F2E3D0;   --color-warning-ink:#5C3610;
  --color-danger: #A4402C;    --color-danger-soft: #F3DFD9;    --color-danger-ink:#5C2115;
  --color-success: #3E7A56;   --color-success-soft: #DCEEE1;   --color-success-ink:#204A2E;
  --color-tip: #1F7A63;       --color-tip-soft: #DCF0EA;       --color-tip-ink:#123D30;
  --color-exam: #6D4A95;      --color-exam-soft: #E8E0F2;      --color-exam-ink:#3A2A56;
  --color-dose: #9C7A17;      --color-dose-soft: #F5EDD3;      --color-dose-ink:#55420C;

  /* ---- 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(20,32,44,.05), 0 6px 20px rgba(20,32,44,.07);
  --shadow-hover: 0 10px 30px rgba(20,32,44,.12);
  --shadow-inset: inset 0 0 0 1px rgba(20,32,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: #0A1B26;
  --color-paper-raised: #132532;
  --color-paper-alt: #1A2E3D;
  --color-ink: #E7EEF4;
  --color-ink-soft: #A6BACC;
  --color-ink-faint: #6E859B;
  --color-line: #1A2E3D;
  --color-line-strong: #294254;

  --accent-primary: #7FB3D3;
  --accent-primary-ink: #DCEEF8;
  --accent-primary-soft: #16303F;

  --color-info: #7FB3D3;      --color-info-soft: #16303F;      --color-info-ink:#DCEEF8;
  --color-warning: #E0B27E;   --color-warning-soft: #3A2A15;   --color-warning-ink:#F6E4CB;
  --color-danger: #E29C8C;    --color-danger-soft: #3D2119;    --color-danger-ink:#F9DED6;
  --color-success: #8FC5A0;   --color-success-soft: #1F3326;   --color-success-ink:#D9EFDF;
  --color-tip: #6FC9AC;       --color-tip-soft: #143028;       --color-tip-ink:#D6F2E7;
  --color-exam: #B79BD6;      --color-exam-soft: #2A2038;      --color-exam-ink:#EBE1F6;
  --color-dose: #D9BE6E;      --color-dose-soft: #362A11;      --color-dose-ink:#F5E9C7;

  --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: #0A1B26;
    --color-paper-raised: #132532;
    --color-paper-alt: #1A2E3D;
    --color-ink: #E7EEF4;
    --color-ink-soft: #A6BACC;
    --color-ink-faint: #6E859B;
    --color-line: #1A2E3D;
    --color-line-strong: #294254;

    --accent-primary: #7FB3D3;
    --accent-primary-ink: #DCEEF8;
    --accent-primary-soft: #16303F;

    --color-info: #7FB3D3;      --color-info-soft: #16303F;      --color-info-ink:#DCEEF8;
    --color-warning: #E0B27E;   --color-warning-soft: #3A2A15;   --color-warning-ink:#F6E4CB;
    --color-danger: #E29C8C;    --color-danger-soft: #3D2119;    --color-danger-ink:#F9DED6;
    --color-success: #8FC5A0;   --color-success-soft: #1F3326;   --color-success-ink:#D9EFDF;
    --color-tip: #6FC9AC;       --color-tip-soft: #143028;       --color-tip-ink:#D6F2E7;
    --color-exam: #B79BD6;      --color-exam-soft: #2A2038;      --color-exam-ink:#EBE1F6;
    --color-dose: #D9BE6E;      --color-dose-soft: #362A11;      --color-dose-ink:#F5E9C7;

    --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);
  }
}