/* DESIGN TOKENS — Manual de Emergentología Misma arquitectura (tipografía, espaciado, sitio multi-página) que el resto de la colección, con paleta propia: acento "rojo código" (#C4192B) — el rojo saturado de señalización del carro de paro, del triage rojo y del botón de emergencia — sobre un papel hueso CÁLIDO de subtono arena, el color del papel milimetrado de la tira de ECG. Deliberadamente distinto de: - Ortopedia y Traumatología: base gris titanio FRÍA (#ECEEF1) + naranja #C2410C. - Neurociencias: base gris peltre fría de subtono verde (#ECEFEE) + cian. - Fisiología (carmesí profundo) y Patología (#6E2430 granate apagado): rojos oscuros y desaturados sobre crema; este es un rojo señal saturado. - Anatomía (#B54428) y Ciencias Sociales (#B5502A): rojos con sesgo naranja. Ningún hex de esta hoja se repite en otro manual. */ :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 hueso" cálido de subtono arena) ---- */ --color-paper: #EFEBE4; --color-paper-raised: #FFFFFF; --color-paper-alt: #E2DBD0; --color-ink: #1C1815; --color-ink-soft: #57504A; --color-ink-faint: #8A827A; --color-line: #D5CCBF; --color-line-strong: #BAAF9F; /* ---- Acento (Emergentología = rojo código / carro de paro) ---- */ --accent-primary: #C4192B; --accent-primary-ink: #781019; --accent-primary-soft: #F7DBDE; /* ---- Panel oscuro de "conducta en guardia" (.protocol) ---- components.css los referencia pero ningún manual previo que use este archivo los definía (Neurociencias nunca usó el componente). Acá el .protocol es central, así que se definen explícitamente. */ --protocol-bg: #1E1013; --protocol-ink: #F6E5E6; --protocol-accent: #FF7A85; /* ---- Semántica (callouts) — sin reciclar hex de otros manuales ---- */ --color-info: #1F6684; --color-info-soft: #D5E7EF; --color-info-ink:#0F3546; --color-warning: #9A6212; --color-warning-soft: #F4E4C3; --color-warning-ink:#523208; --color-danger: #A82230; --color-danger-soft: #F6D9DC; --color-danger-ink:#5C121B; --color-success: #2F6E52; --color-success-soft: #D6E9DE; --color-success-ink:#173D2C; --color-dose: #52504A; --color-dose-soft: #E9E6DF; --color-dose-ink:#302E29; --color-tip: #45558F; --color-tip-soft: #DDE2F2; --color-tip-ink:#232D51; --color-exam: #74398A; --color-exam-soft: #EDDAF2; --color-exam-ink:#421F4E; /* ---- 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(28,24,21,.05), 0 6px 20px rgba(28,24,21,.07); --shadow-hover: 0 10px 30px rgba(28,24,21,.12); --shadow-inset: inset 0 0 0 1px rgba(28,24,21,.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: #16120F; --color-paper-raised: #1F1A16; --color-paper-alt: #2A231D; --color-ink: #EDE7DF; --color-ink-soft: #B3A99D; --color-ink-faint: #7A7167; --color-line: #2A231D; --color-line-strong: #3D342B; --accent-primary: #FF7A85; --accent-primary-ink: #FFDBDE; --accent-primary-soft: #3D1116; --protocol-bg: #180C0E; --protocol-ink: #F6E5E6; --protocol-accent: #FF7A85; --color-info: #74B6D2; --color-info-soft: #0F2C39; --color-info-ink:#D2E9F2; --color-warning: #D9A94F; --color-warning-soft: #38270B; --color-warning-ink:#F6E3BB; --color-danger: #E58B95; --color-danger-soft: #3F1319; --color-danger-ink:#FADCE0; --color-success: #7FBE9E; --color-success-soft: #143026; --color-success-ink:#D3EBDF; --color-dose: #B0A99C; --color-dose-soft: #262320; --color-dose-ink:#E3DED5; --color-tip: #96A2E2; --color-tip-soft: #1D2349; --color-tip-ink:#DDE2F9; --color-exam: #C892D9; --color-exam-soft: #351B3D; --color-exam-ink:#F2DCF7; --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: #16120F; --color-paper-raised: #1F1A16; --color-paper-alt: #2A231D; --color-ink: #EDE7DF; --color-ink-soft: #B3A99D; --color-ink-faint: #7A7167; --color-line: #2A231D; --color-line-strong: #3D342B; --accent-primary: #FF7A85; --accent-primary-ink: #FFDBDE; --accent-primary-soft: #3D1116; --protocol-bg: #180C0E; --protocol-ink: #F6E5E6; --protocol-accent: #FF7A85; --color-info: #74B6D2; --color-info-soft: #0F2C39; --color-info-ink:#D2E9F2; --color-warning: #D9A94F; --color-warning-soft: #38270B; --color-warning-ink:#F6E3BB; --color-danger: #E58B95; --color-danger-soft: #3F1319; --color-danger-ink:#FADCE0; --color-success: #7FBE9E; --color-success-soft: #143026; --color-success-ink:#D3EBDF; --color-dose: #B0A99C; --color-dose-soft: #262320; --color-dose-ink:#E3DED5; --color-tip: #96A2E2; --color-tip-soft: #1D2349; --color-tip-ink:#DDE2F9; --color-exam: #C892D9; --color-exam-soft: #351B3D; --color-exam-ink:#F2DCF7; --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); } }