/*
  DESIGN TOKENS — Manual de Anatomía
  Mismo sistema (tipografía, espaciado, arquitectura de sitio) que el resto
  de la colección, con paleta propia: acento bermellón de atlas anatómico
  (el rojo de las láminas clásicas para músculo/arteria) sobre una base
  "piedra" fría gris-azulada — evoca hueso y cartílago, distinta del cream
  de Clínica Médica, el rosa de Obstetricia, el verde de Toxicología, el
  índigo de Comprensión de Textos, el terracota de Ciencias Sociales, el
  teal de Biología y el violeta de Biofísica.
*/

:root {
  color-scheme: light;

  --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, "piedra" fría gris-azulada) ---- */
  --color-paper: #EBEDEE;
  --color-paper-raised: #F8F9F9;
  --color-paper-alt: #DCE1E3;
  --color-ink: #1A1D1F;
  --color-ink-soft: #4B5457;
  --color-ink-faint: #7C8588;
  --color-line: #CCD3D5;
  --color-line-strong: #AAB4B7;

  /* ---- Acento de la colección (Anatomía = bermellón de atlas) ---- */
  --accent-primary: #B54428;
  --accent-primary-ink: #7A2C15;
  --accent-primary-soft: #F6E1D6;

  /* ---- Semántica (callouts) — paleta propia ---- */
  --color-info: #2660A4;      --color-info-soft: #DFEBF7;      --color-info-ink:#153D63;
  --color-warning: #9C6E12;   --color-warning-soft: #F8EFDA;   --color-warning-ink:#5E3F09;
  --color-danger: #A32F44;    --color-danger-soft: #F9E1E7;    --color-danger-ink:#6E1F30;
  --color-success: #1C7A52;   --color-success-soft: #DEF2E8;   --color-success-ink:#0E4E33;
  --color-tip: #1B7A8A;       --color-tip-soft: #DFF0F2;       --color-tip-ink:#0F4A54;
  --color-exam: #A0479C;      --color-exam-soft: #F8E3F5;      --color-exam-ink:#682963;
  --color-dose: #B5637E;      --color-dose-soft: #F7E2E9;      --color-dose-ink:#6E2F3E;

  /* ---- Clases de recomendación ---- */
  --class-I: #1C7A52;
  --class-IIa: #6B8A1E;
  --class-IIb: #9C6E12;
  --class-III: #A32F3A;

  /* ---- Panel oscuro "Guía práctica / síntesis" ---- */
  --protocol-bg: #14171A;
  --protocol-ink: #EBEDEE;
  --protocol-accent: #E0705F;

  /* ---- 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(32,30,27,.05), 0 6px 20px rgba(32,30,27,.07);
  --shadow-hover: 0 10px 30px rgba(32,30,27,.12);
  --shadow-inset: inset 0 0 0 1px rgba(32,30,27,.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: #14171A;
  --color-paper-raised: #1C2023;
  --color-paper-alt: #242A2D;
  --color-ink: #E7EAEB;
  --color-ink-soft: #AEB7BA;
  --color-ink-faint: #7C8588;
  --color-line: #2E3538;
  --color-line-strong: #3E484C;

  --accent-primary: #E0705F;
  --accent-primary-ink: #F7C9C2;
  --accent-primary-soft: #3A1F1A;

  --color-info: #7FAEDE;      --color-info-soft: #182E42;      --color-info-ink:#C8E0F5;
  --color-warning: #E0BB5C;   --color-warning-soft: #332810;   --color-warning-ink:#F5DFA8;
  --color-danger: #E88C9E;    --color-danger-soft: #3A1D26;    --color-danger-ink:#F7C6D2;
  --color-success: #5FC292;   --color-success-soft: #12331F;   --color-success-ink:#B8ECD2;
  --color-tip: #5FC4D4;       --color-tip-soft: #0F3236;       --color-tip-ink:#BCE9EF;
  --color-exam: #D68FD0;      --color-exam-soft: #3A2038;      --color-exam-ink:#F5CBF0;
  --color-dose: #E8A0B8;      --color-dose-soft: #3A1E29;      --color-dose-ink:#F7CFDF;

  --protocol-bg: #0F1214;
  --protocol-ink: #E7EAEB;
  --protocol-accent: #E0705F;

  --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: #14171A;
    --color-paper-raised: #1C2023;
    --color-paper-alt: #242A2D;
    --color-ink: #E7EAEB;
    --color-ink-soft: #AEB7BA;
    --color-ink-faint: #7C8588;
    --color-line: #2E3538;
    --color-line-strong: #3E484C;

    --accent-primary: #E0705F;
    --accent-primary-ink: #F7C9C2;
    --accent-primary-soft: #3A1F1A;

    --color-info: #7FAEDE;      --color-info-soft: #182E42;      --color-info-ink:#C8E0F5;
    --color-warning: #E0BB5C;   --color-warning-soft: #332810;   --color-warning-ink:#F5DFA8;
    --color-danger: #E88C9E;    --color-danger-soft: #3A1D26;    --color-danger-ink:#F7C6D2;
    --color-success: #5FC292;   --color-success-soft: #12331F;   --color-success-ink:#B8ECD2;
    --color-tip: #5FC4D4;       --color-tip-soft: #0F3236;       --color-tip-ink:#BCE9EF;
    --color-exam: #D68FD0;      --color-exam-soft: #3A2038;      --color-exam-ink:#F5CBF0;
    --color-dose: #E8A0B8;      --color-dose-soft: #3A1E29;      --color-dose-ink:#F7CFDF;

    --protocol-bg: #0F1214;
    --protocol-ink: #E7EAEB;
    --protocol-accent: #E0705F;

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