/*
  DESIGN TOKENS — Manual de Ortopedia y Traumatología
  Misma arquitectura (tipografía, espaciado, componentes) que el resto de la
  colección, con paleta propia: base "gris titanio" fría — el gris del
  negatoscopio, de la placa radiográfica y del acero quirúrgico — con acento
  NARANJA DE FIJADOR EXTERNO (#C2410C), el naranja de señalización del
  instrumental de trauma y de las cintas de inmovilización. Ningún otro manual
  de la colección usa base gris neutra fría ni acento naranja saturado.
*/

: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, "gris titanio / negatoscopio") ---- */
  --color-paper: #ECEEF1;
  --color-paper-raised: #FFFFFF;
  --color-paper-alt: #DCE0E5;
  --color-ink: #15181C;
  --color-ink-soft: #4B535D;
  --color-ink-faint: #7B848F;
  --color-line: #CCD2D9;
  --color-line-strong: #ACB4BE;

  /* ---- Acento del manual (naranja de fijador externo) ---- */
  --accent-primary: #C2410C;
  --accent-primary-ink: #7B2708;
  --accent-primary-soft: #F7E1D4;

  /* ---- Semántica (callouts) — hex propios, sin reciclar los de otros manuales ---- */
  --color-info: #1F6F8B;      --color-info-soft: #D7E8EE;      --color-info-ink:#0F3D4D;
  --color-warning: #B07407;   --color-warning-soft: #F5E6CC;   --color-warning-ink:#653F04;
  --color-danger: #B23B2E;    --color-danger-soft: #F6DED9;    --color-danger-ink:#6B1F16;
  --color-success: #3F7B5B;   --color-success-soft: #DBEBE2;   --color-success-ink:#22452F;
  --color-tip: #1D7E86;       --color-tip-soft: #D6EEF0;       --color-tip-ink:#0E4348;
  --color-exam: #6B4FA8;      --color-exam-soft: #E4DEF4;      --color-exam-ink:#3B2A63;

  /* ---- 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(21,24,28,.05), 0 6px 20px rgba(21,24,28,.08);
  --shadow-hover: 0 10px 30px rgba(21,24,28,.14);
  --shadow-inset: inset 0 0 0 1px rgba(21,24,28,.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: #101317;
  --color-paper-raised: #181C22;
  --color-paper-alt: #212730;
  --color-ink: #E6EAEF;
  --color-ink-soft: #A8B2BD;
  --color-ink-faint: #727C88;
  --color-line: #212730;
  --color-line-strong: #333B45;

  --accent-primary: #FB923C;
  --accent-primary-ink: #FFDCBD;
  --accent-primary-soft: #3B2414;

  --color-info: #6FB6CE;      --color-info-soft: #133039;      --color-info-ink:#CFE9F1;
  --color-warning: #E0B061;   --color-warning-soft: #372814;   --color-warning-ink:#F7E7C6;
  --color-danger: #E2887B;    --color-danger-soft: #3A1E19;    --color-danger-ink:#FADCD6;
  --color-success: #7FBE9B;   --color-success-soft: #1A3226;   --color-success-ink:#D8EDE2;
  --color-tip: #63C2C9;       --color-tip-soft: #0E3538;       --color-tip-ink:#CCEFF1;
  --color-exam: #B39BE2;      --color-exam-soft: #2A2044;      --color-exam-ink:#E6DCF7;

  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.4);
  --shadow-hover: 0 10px 30px rgba(0,0,0,.5);
  --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: #101317;
    --color-paper-raised: #181C22;
    --color-paper-alt: #212730;
    --color-ink: #E6EAEF;
    --color-ink-soft: #A8B2BD;
    --color-ink-faint: #727C88;
    --color-line: #212730;
    --color-line-strong: #333B45;

    --accent-primary: #FB923C;
    --accent-primary-ink: #FFDCBD;
    --accent-primary-soft: #3B2414;

    --color-info: #6FB6CE;      --color-info-soft: #133039;      --color-info-ink:#CFE9F1;
    --color-warning: #E0B061;   --color-warning-soft: #372814;   --color-warning-ink:#F7E7C6;
    --color-danger: #E2887B;    --color-danger-soft: #3A1E19;    --color-danger-ink:#FADCD6;
    --color-success: #7FBE9B;   --color-success-soft: #1A3226;   --color-success-ink:#D8EDE2;
    --color-tip: #63C2C9;       --color-tip-soft: #0E3538;       --color-tip-ink:#CCEFF1;
    --color-exam: #B39BE2;      --color-exam-soft: #2A2044;      --color-exam-ink:#E6DCF7;

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