/*
  DESIGN TOKENS — Manual de Clínica Médica
  Fuente única de verdad visual del proyecto. No hardcodear colores/espaciados
  en otros archivos: siempre referenciar estas variables.
*/

: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") ---- */
  --color-paper: #FBF9F5;
  --color-paper-raised: #FFFFFF;
  --color-paper-alt: #F3EFE6;
  --color-ink: #201E1B;
  --color-ink-soft: #55504A;
  --color-ink-faint: #8B857C;
  --color-line: #E6DFD0;
  --color-line-strong: #D2C7AE;

  /* ---- Acentos por sección ---- */
  --accent-cardio: #9E2A3F;
  --accent-cardio-ink: #6E1D2C;
  --accent-cardio-soft: #F8E6E9;
  --accent-neumo: #1F6F78;
  --accent-neumo-ink: #154D53;
  --accent-neumo-soft: #E2F1F0;
  --accent-infecto: #5B3E8E;
  --accent-infecto-ink: #402B66;
  --accent-infecto-soft: #ECE5F7;
  --accent-neutral: #3A5A78;
  --accent-neutral-soft: #E4EBF1;

  /* ---- Semántica (callouts) ---- */
  --color-info: #2563EB;      --color-info-soft: #E8EFFD;      --color-info-ink:#1E3A8A;
  --color-warning: #B45309;   --color-warning-soft: #FCEED2;   --color-warning-ink:#7C3A05;
  --color-danger: #B91C1C;    --color-danger-soft: #FBE4E3;    --color-danger-ink:#7F1414;
  --color-success: #15803D;   --color-success-soft: #E1F3E6;   --color-success-ink:#0F5C2C;
  --color-tip: #0F766E;       --color-tip-soft: #DEF4F1;       --color-tip-ink:#0A544E;
  --color-exam: #6D28D9;      --color-exam-soft: #EFE7FC;      --color-exam-ink:#4C1D95;

  /* ---- Clases de recomendación (estilo ESC/AHA) ---- */
  --class-I: #15803D;
  --class-IIa: #65A30D;
  --class-IIb: #CA8A04;
  --class-III: #B91C1C;

  /* ---- 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: #14161A;
  --color-paper-raised: #1B1E23;
  --color-paper-alt: #20242A;
  --color-ink: #EDEAE2;
  --color-ink-soft: #B7B1A6;
  --color-ink-faint: #7E786F;
  --color-line: #2C2F35;
  --color-line-strong: #3C4048;

  --accent-cardio: #E8697E;
  --accent-cardio-ink: #F3B4C0;
  --accent-cardio-soft: #3A2129;
  --accent-neumo: #5FC2C9;
  --accent-neumo-ink: #A9E1E4;
  --accent-neumo-soft: #16302F;
  --accent-infecto: #B29AE6;
  --accent-infecto-ink: #D9CCF5;
  --accent-infecto-soft: #2A2340;
  --accent-neutral: #8FB4D6;
  --accent-neutral-soft: #1E2A36;

  --color-info: #6EA0FA;      --color-info-soft: #1B2A47;      --color-info-ink:#BFD4FF;
  --color-warning: #E3A63C;   --color-warning-soft: #3A2C11;   --color-warning-ink:#F5D9A4;
  --color-danger: #F1706A;    --color-danger-soft: #3B1B1A;    --color-danger-ink:#FAC0BC;
  --color-success: #55C57F;   --color-success-soft: #163524;   --color-success-ink:#B7EAC7;
  --color-tip: #4FCFC3;       --color-tip-soft: #123330;       --color-tip-ink:#AEE9E2;
  --color-exam: #B096F0;      --color-exam-soft: #271C40;      --color-exam-ink:#DACCF8;

  --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: #14161A;
    --color-paper-raised: #1B1E23;
    --color-paper-alt: #20242A;
    --color-ink: #EDEAE2;
    --color-ink-soft: #B7B1A6;
    --color-ink-faint: #7E786F;
    --color-line: #2C2F35;
    --color-line-strong: #3C4048;

    --accent-cardio: #E8697E;
    --accent-cardio-ink: #F3B4C0;
    --accent-cardio-soft: #3A2129;
    --accent-neumo: #5FC2C9;
    --accent-neumo-ink: #A9E1E4;
    --accent-neumo-soft: #16302F;
    --accent-infecto: #B29AE6;
    --accent-infecto-ink: #D9CCF5;
    --accent-infecto-soft: #2A2340;
    --accent-neutral: #8FB4D6;
    --accent-neutral-soft: #1E2A36;

    --color-info: #6EA0FA;      --color-info-soft: #1B2A47;      --color-info-ink:#BFD4FF;
    --color-warning: #E3A63C;   --color-warning-soft: #3A2C11;   --color-warning-ink:#F5D9A4;
    --color-danger: #F1706A;    --color-danger-soft: #3B1B1A;    --color-danger-ink:#FAC0BC;
    --color-success: #55C57F;   --color-success-soft: #163524;   --color-success-ink:#B7EAC7;
    --color-tip: #4FCFC3;       --color-tip-soft: #123330;       --color-tip-ink:#AEE9E2;
    --color-exam: #B096F0;      --color-exam-soft: #271C40;      --color-exam-ink:#DACCF8;

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