/*
  DESIGN TOKENS — Manual de Bioquímica
  Mismo sistema (tipografía, espaciado, arquitectura de sitio) que el resto
  de la colección, con paleta propia: acento ámbar metabólico (ATP, energía,
  la luz dorada de una reacción bioquímica) sobre un papel neutro con tinte
  cálido apenas perceptible, distinto del carmesí de Fisiología, el bermellón
  de Anatomía y el terracota de Ciencias Sociales — 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 tinte cálido/amarronado) ---- */
  --color-paper: #FAF7F0;
  --color-paper-raised: #FFFDF8;
  --color-paper-alt: #F2E7D3;
  --color-ink: #221C10;
  --color-ink-soft: #5A4F3A;
  --color-ink-faint: #8C7F63;
  --color-line: #E9DCBC;
  --color-line-strong: #D6C08A;

  /* ---- Acento de la colección (Bioquímica = ámbar metabólico) ---- */
  --accent-primary: #A8720A;
  --accent-primary-ink: #6E4A05;
  --accent-primary-soft: #FBEDD0;

  /* ---- Semántica (callouts) — paleta propia, sin reciclar hex de otros manuales ---- */
  --color-info: #2E6C8E;      --color-info-soft: #E5F0F5;      --color-info-ink:#17435A;
  --color-warning: #A8580C;   --color-warning-soft: #FAE7D4;   --color-warning-ink:#6B3707;
  --color-danger: #A32E2E;    --color-danger-soft: #F8E3E1;    --color-danger-ink:#6E1F1F;
  --color-success: #3E7D3A;   --color-success-soft: #E5F1E1;   --color-success-ink:#255021;
  --color-tip: #0E7A6E;       --color-tip-soft: #DEF2EE;       --color-tip-ink:#08473F;
  --color-exam: #5B4A9E;      --color-exam-soft: #EBE7F7;      --color-exam-ink:#372C6B;

  /* ---- 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(34,28,16,.05), 0 6px 20px rgba(34,28,16,.07);
  --shadow-hover: 0 10px 30px rgba(34,28,16,.12);
  --shadow-inset: inset 0 0 0 1px rgba(34,28,16,.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: #181410;
  --color-paper-raised: #201A14;
  --color-paper-alt: #2A2117;
  --color-ink: #EFE7D6;
  --color-ink-soft: #BCAE8E;
  --color-ink-faint: #83765C;
  --color-line: #2E2618;
  --color-line-strong: #3E331F;

  --accent-primary: #E0A63C;
  --accent-primary-ink: #F7DFA8;
  --accent-primary-soft: #3A2A10;

  --color-info: #86B8DE;      --color-info-soft: #1B2E3E;      --color-info-ink:#CBE2F2;
  --color-warning: #E0975C;   --color-warning-soft: #372110;   --color-warning-ink:#F5C9A8;
  --color-danger: #EE8B8B;    --color-danger-soft: #3A1F1F;    --color-danger-ink:#FACACA;
  --color-success: #7FC97A;   --color-success-soft: #16301A;   --color-success-ink:#C6ECC3;
  --color-tip: #5FC9BA;       --color-tip-soft: #10322D;       --color-tip-ink:#BCECE3;
  --color-exam: #A493E0;      --color-exam-soft: #241E3D;      --color-exam-ink:#D9D0F5;

  --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: #181410;
    --color-paper-raised: #201A14;
    --color-paper-alt: #2A2117;
    --color-ink: #EFE7D6;
    --color-ink-soft: #BCAE8E;
    --color-ink-faint: #83765C;
    --color-line: #2E2618;
    --color-line-strong: #3E331F;

    --accent-primary: #E0A63C;
    --accent-primary-ink: #F7DFA8;
    --accent-primary-soft: #3A2A10;

    --color-info: #86B8DE;      --color-info-soft: #1B2E3E;      --color-info-ink:#CBE2F2;
    --color-warning: #E0975C;   --color-warning-soft: #372110;   --color-warning-ink:#F5C9A8;
    --color-danger: #EE8B8B;    --color-danger-soft: #3A1F1F;    --color-danger-ink:#FACACA;
    --color-success: #7FC97A;   --color-success-soft: #16301A;   --color-success-ink:#C6ECC3;
    --color-tip: #5FC9BA;       --color-tip-soft: #10322D;       --color-tip-ink:#BCECE3;
    --color-exam: #A493E0;      --color-exam-soft: #241E3D;      --color-exam-ink:#D9D0F5;

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