/* ============================================================ Clio · Astramech — Editorial Design System (Direction B) ============================================================ Paper background, ink type, soft warm dividers, highlight cream. Type: Instrument Serif (display) + Geist (body/UI) + Geist Mono (data). Usage por template: 1) Cargar Google Fonts (Instrument Serif + Geist + Geist Mono) en . 2) 3) Eliminar el bloque ":root { --bg ... }" propio del template — los tokens vienen de aquí. 4) Las reglas existentes que usan var(--bg), var(--text), etc. ahora resuelven a paper/ink en lugar de dark. Multi-tenant safe: solo afecta presentación. No toca lógica, no asume tenant, no crea CSS-in-JS dinámico. ============================================================ */ :root { /* ── Surfaces (mapean a los tokens existentes del dark theme) ── */ --bg: #f6f3ec; /* main background — antes #0D0D0D */ --bg2: #efeadd; /* muted section — antes #141414 */ --surface: #ffffff; /* elevated cards — antes #1A1A1A */ --paper: #f6f3ec; /* alias semántico */ --paper-2: #efeadd; --card: #ffffff; --highlight: #e9e3cf; /* warm highlight (drop caps, hover) */ --highlight-2: #f1ead4; /* ── Borders ── */ --border: #d9d3c5; /* warm tan dividers */ --border2: #c2bba9; /* stronger emphasis */ --line: #d9d3c5; --line-strong: #1b1a17; /* ── Ink ── */ --text: #1b1a17; /* primary — antes #FFFFFF */ --text2: #3a3833; /* secondary — antes #BFBFBF */ --muted: #6b665e; /* tertiary / labels — antes #6B7280 */ --dimmer: #9a9489; --ink: #1b1a17; --ink-soft: #3a3833; --dim: #6b665e; /* ── Accent (semantic, used sparingly) ── */ --accent: #1b1a17; /* CTA primary = ink (no neón) */ --accent-lt: #efeadd; /* light variant para badges */ --accent-fg: #f6f3ec; /* on accent */ /* ── Status ── */ --success: #2f6b3a; /* antes #00FF9C neón */ --success-bg: #e1ebd9; /* antes #0D2A1A */ --pos: #2f6b3a; --pos-bg: #e1ebd9; --danger: #a3361f; /* antes #E53935 */ --danger-bg: #ecd5cc; /* antes #2A1010 */ --neg: #a3361f; --neg-bg: #ecd5cc; --warning: #b8771b; --warning-bg: #f1e2c2; --warning-border: #d9b87a; --warn: #b8771b; --warn-bg: #f1e2c2; --info: #2c4a7a; --info-bg: #d8dee9; --violet: #5b3a72; /* antes #7C3AED */ --violet-bg: #e6dbef; /* ── Type families ── */ --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── Radii ── */ --r-sm: 4px; --r: 8px; --r-lg: 14px; /* ── Shadows ── */ --shadow-sm: 0 1px 0 rgba(40,30,20,0.04), 0 1px 2px rgba(40,30,20,0.04); --shadow: 0 12px 32px -18px rgba(40,30,20,0.18), 0 1px 2px rgba(40,30,20,0.04); --shadow-lg: 0 30px 80px -40px rgba(40,30,20,0.25); /* ── Spacing ── */ --pad-page: 40px; --pad-card: 28px; /* ── Layout ── */ --sidebar-w: 248px; --topbar-h: 56px; } /* ============================================================ Base typography overrides — opt-in via body o template root. No se aplican globalmente para no romper templates legacy que aún no han migrado al diseño editorial. ============================================================ */ body.editorial, .editorial-root { background: var(--paper); color: var(--ink); font-family: var(--sans); } /* Serif headings dentro de cualquier contenedor editorial */ .editorial-root h1, .editorial-root h2, .editorial-root h3, .editorial-root .ed-title, body.editorial h1, body.editorial h2, body.editorial h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; color: var(--ink); } /* ============================================================ Utility classes (prefijo .ed- para no chocar con CSS legacy) ============================================================ */ .ed-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } .ed-sans { font-family: var(--sans); } .ed-mono { font-family: var(--mono); } .ed-italic { font-style: italic; } .ed-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .ed-dropcap::first-letter { font-family: var(--serif); font-style: italic; font-size: 4.5em; line-height: 0.85; float: left; padding: 6px 12px 0 0; color: var(--ink); } /* ── Editorial card ── */ .ed-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .ed-card--featured { border-color: var(--ink); box-shadow: var(--shadow); } /* ── Editorial badge ── */ .ed-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; background: var(--highlight); color: var(--ink); } .ed-badge--pos { background: var(--pos-bg); color: var(--pos); } .ed-badge--warn { background: var(--warn-bg); color: var(--warn); } .ed-badge--neg { background: var(--neg-bg); color: var(--neg); } .ed-badge--info { background: var(--info-bg); color: var(--info); } /* ── Editorial button ── */ .ed-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: background 180ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 180ms; } .ed-btn:hover { border-color: var(--ink); } .ed-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .ed-btn--primary:hover { background: #000; } .ed-btn--ghost { background: transparent; border-color: transparent; } .ed-btn--ghost:hover { background: var(--highlight); } /* ── Section tag (§ N · LABEL) ── */ .ed-tag { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .ed-tag__numeral { color: var(--ink); } .ed-tag__rule { width: 60px; height: 1px; background: var(--line); } /* ============================================================ A11y utilities ============================================================ */ /* Visually hidden but exposed to AT (focusable retains focus) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link */ .skip-link { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 99px; font-family: var(--sans); font-size: 13px; text-decoration: none; transform: translateY(-200%); transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--paper); outline-offset: 2px; } /* Focus visibility */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Scrollbar (suave, color paper) ============================================================ */ .editorial-root ::-webkit-scrollbar, body.editorial ::-webkit-scrollbar { width: 10px; height: 10px; } .editorial-root ::-webkit-scrollbar-thumb, body.editorial ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--paper); } .editorial-root ::-webkit-scrollbar-thumb:hover, body.editorial ::-webkit-scrollbar-thumb:hover { background: #c2bba9; } .editorial-root ::-webkit-scrollbar-track, body.editorial ::-webkit-scrollbar-track { background: transparent; }