:root{ /* ---- Marca · LIGHT ---- */ --arena:#f6f3e7; --piedra:#dfded8; --salvia:#c5c8bf; --agua:#65867b; --agua-texto:#324c44; /* variante oscura de --agua solo para texto/botones: --agua sobre fondos claros no llega a 4.5:1 (WCAG AA) */ --cielo:#cde1e7; --azul:#a9bcce; /* ---- Marca · DARK (tokens listos, sin toggle en v1) ---- */ --arena-d:#1c1a15; --piedra-d:#282826; --salvia-d:#2a2e28; --agua-d:#3d5c52; --cielo-d:#1a2e35; --azul-d:#1e2d3d; /* ---- Grises neutrales ---- */ --g0:#ffffff; --g50:#fafafa; --g100:#f5f5f5; --g200:#e5e5e5; --g300:#d4d4d4; --g400:#a3a3a3; --g500:#737373; --g600:#525252; --g700:#404040; --g800:#262626; --g900:#171717; --g1000:#000000; /* ---- Categorías del glosario (color por slug de taxonomía) ---- */ --cat-mente-tint:#e7e2ee; --cat-mente-ink:#5f5480; --cat-cuerpo-tint:#d9e4de; --cat-cuerpo-ink:#46695d; --cat-trad-tint:#ecdfd0; --cat-trad-ink:#78583a; /* oscurecido: #8a6a4a original daba 3.78:1 sobre el tint, falla WCAG AA */ --cat-nat-tint:#d4e3e8; --cat-nat-ink:#42606c; /* oscurecido: #4a6b78 original daba 4.35:1 sobre el tint, falla WCAG AA */ --cat-mente-tint-d:#2b2733; --cat-mente-ink-d:#b8abd0; --cat-cuerpo-tint-d:#232b28; --cat-cuerpo-ink-d:#a9c4b9; --cat-trad-tint-d:#2e2820; --cat-trad-ink-d:#cdad8b; --cat-nat-tint-d:#1e2a2f; --cat-nat-ink-d:#9fc0cc; /* ---- Semánticos (light) ---- */ --bg:var(--g50); --surface:#ffffff; --ink:#242320; --muted:#6b6a63; --border:#e6e4db; --accent:var(--agua); /* ---- Bandas de sección ---- */ --charcoal:#484848; --footer:#1d2d3d; /* ---- Escala de espaciado (base 4px) ---- */ --s0:.25rem; --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem; --s7:4rem; --s8:6rem; /* ---- Radios y sombra ---- */ --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px; --shadow:0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06); /* ---- Tipografía ---- */ --fs-serif:'Amiri', Georgia, 'Times New Roman', serif; --fs-sans:'Montserrat', system-ui, -apple-system, sans-serif; --fs-slab:'Bree Serif', Georgia, serif; /* ---- Layout ---- */ --pad-x: clamp(1.25rem, 5vw, 5rem); --maxw: 1200px; } /* Modo oscuro: tokens listos, sin activar en v1 (ver DESIGN_BRIEF.md §10.4). Cuando se lance, alcanza con activar este bloque (prefers-color-scheme y/o un toggle que setee [data-theme="dark"] en ). */ /* @media (prefers-color-scheme: dark){ :root{ --bg:var(--arena-d); --surface:var(--piedra-d); --ink:#efeee7; --muted:#a8a69c; --border:#3a382f; } } */