/* ============================================================ Varela y Asociados — design tokens 3 tonos × 3 paletas. Cambian vía data-attrs en . ============================================================ */ :root { /* Defaults overridden by tone + palette below */ --bg: #FAF7F1; --bg-alt: #F2EDE2; --ink: #0B1730; --ink-soft: #46506B; --line: rgba(11,23,48,.12); --line-soft: rgba(11,23,48,.06); --navy: #0B1730; --accent: #C29B4E; --accent-2: #8C6E2F; --on-navy: #F5EFE0; --surface: #FFFFFF; --hover: rgba(11,23,48,.04); /* Typography roles */ --font-display: "Newsreader", "Source Serif Pro", Georgia, serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-num: var(--font-display); --display-weight: 400; --display-tracking: -0.02em; --body-weight: 400; --label-tracking: 0.04em; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --anim-mult: 1; /* 0 = off */ --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; } /* ── TONOS ───────────────────────────────────────────────── */ /* 1) Cálido-profesional — serifa editorial, crema cálida */ html[data-tone="warm"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-num: "Newsreader", Georgia, serif; --display-weight: 400; --display-tracking: -0.025em; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; } /* 2) Tecno-confianza — grotesca + mono, grids visibles */ html[data-tone="tech"] { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-num: "JetBrains Mono", ui-monospace, monospace; --display-weight: 500; --display-tracking: -0.035em; --label-tracking: 0.08em; --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; } /* 3) Minimalismo financiero — grotesca grande, mucho blanco */ html[data-tone="min"] { --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-num: "Geist", ui-sans-serif, system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.04em; --radius: 10px; --radius-sm: 6px; --radius-lg: 18px; } /* ── PALETAS (las 3 ancladas en navy) ─────────────────────── */ /* A) Institucional — navy + dorado */ html[data-palette="institutional"] { --bg: #FAF7F1; --bg-alt: #F1EBDC; --bg-deep: #E5DDC6; /* deep warm beige — used as 3rd light tone */ --bg-deep-on: #0B1730; --ink: #0B1730; --ink-soft: #46506B; --line: rgba(11,23,48,.14); --line-soft:rgba(11,23,48,.06); --navy: #0B1730; --brand: #003399; /* logo blue accent */ --accent: #C29B4E; --accent-2: #8C6E2F; --on-navy: #F1EBDC; --surface: #FFFFFF; --hover: rgba(11,23,48,.04); } /* B) Tecno — navy + cyan eléctrico */ html[data-palette="tech"] { --bg: #F4F6FA; --bg-alt: #E9EDF4; --bg-deep: #D9DFEC; --bg-deep-on: #0A1530; --ink: #0A1530; --ink-soft: #3B4566; --line: rgba(10,21,48,.14); --line-soft:rgba(10,21,48,.06); --navy: #0A1530; --brand: #003399; --accent: #00C2C7; --accent-2: #008B92; --on-navy: #E8FAFB; --surface: #FFFFFF; --hover: rgba(10,21,48,.04); } /* C) Editorial — navy + sienna cálido */ html[data-palette="editorial"] { --bg: #FAF8F3; --bg-alt: #EFE9DB; --bg-deep: #E3DAC6; --bg-deep-on: #0F1B36; --ink: #0F1B36; --ink-soft: #475068; --line: rgba(15,27,54,.14); --line-soft:rgba(15,27,54,.06); --navy: #0F1B36; --brand: #003399; --accent: #C8553D; --accent-2: #8E3A28; --on-navy: #F4E8DC; --surface: #FFFFFF; --hover: rgba(15,27,54,.04); } /* ── ANIMATION INTENSITY (drives durations) ───────────────── */ html[data-anim="off"] { --anim-mult: 0; } html[data-anim="subtle"] { --anim-mult: .6; } html[data-anim="full"] { --anim-mult: 1; } @media (prefers-reduced-motion: reduce) { :root { --anim-mult: 0; } }