/* ===================================================================== Latitud 40 · TOKENS Único lugar donde se definen colores, tipografía, radios y espaciados. Los demás archivos CSS solo consumen estas variables. El backoffice podrá sobreescribir --accent (y el logo) sin tocar ningún otro archivo. Tema: claro por defecto, oscuro por preferencia del sistema o por el interruptor de la barra (data-theme="dark" | "light" en ). ===================================================================== */ :root { color-scheme: light; /* Superficies */ --bg: #f3f3f1; --bg2: #ebebe8; --surf: #ffffff; --surf2: #f7f7f5; --line: rgba(18, 19, 22, .10); --line2: rgba(18, 19, 22, .20); /* Texto */ --text: #121316; --muted: #5c5b57; --dim: #8b8a85; /* Acento: rojo del mosquetón del logo */ --accent: #d4232a; --accent-2: #e3262c; --accent-deep: #8d1418; --on-accent: #ffffff; --accent-soft: rgba(212, 35, 42, .10); /* Materiales */ --glass: rgba(255, 255, 255, .50); --glass-solid: rgba(248, 248, 246, .66); --sheen: .30; /* brillo superior del vidrio */ --bezel: rgba(18, 19, 22, .04); --shadow: 0 30px 70px -40px rgba(18, 19, 22, .35); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --scrim-o: .22; /* veladura sobre fotos en paneles */ --hero-bg-o: .18; /* fondo desenfocado del hero */ --grain-o: .035; /* Logo: cuál versión se muestra */ --logo-light: block; --logo-dark: none; /* Zonas de la página (una paleta puede pintarlas distinto: barra, bandas, cierre, pie) */ --nav-bg: var(--glass); --nav-bg-solid: var(--glass-solid); --nav-text: var(--text); --nav-muted: var(--muted); --nav-line: var(--line); --nav-logo-light: var(--logo-light); --nav-logo-dark: var(--logo-dark); --band-bg: var(--bg2); --cta-bg: var(--bg2); --cta-text: var(--text); --cta-muted: var(--muted); --cta-line: var(--line2); --footer-bg: var(--bg); --footer-text: var(--text); --footer-muted: var(--muted); --footer-dim: var(--dim); --footer-line: var(--line); --footer-logo-light: var(--logo-light); --footer-logo-dark: var(--logo-dark); /* Tipografía (el selector de fuentes cambia solo estos tokens) */ --font: "Archivo", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif; --font-display: var(--font); --display-wght: 900; --display-wdth: 80; --display-tt: uppercase; --display-ls: -.015em; --display-lh: .9; --display-scale: 1; --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; /* multiplicadores por rol (el panel los define; 1 = tamaño original) */ --k-display: 1; --k-h3: 1; --k-lead: 1; --k-body: 1; --k-eyebrow: 1; --k-btn: 1; --fs-body: calc(17px * var(--k-body)); --fs-display: calc(clamp(2.6rem, 6.2vw, 5.6rem) * var(--display-scale) * var(--k-display)); --fs-hero: calc(clamp(3rem, 6vw, 6.4rem) * var(--display-scale) * var(--k-display)); --fs-h3: calc(clamp(1.25rem, 1.7vw, 1.6rem) * var(--k-h3)); --fs-lead: calc(clamp(1.05rem, 1.35vw, 1.25rem) * var(--k-lead)); /* Geometría y ritmo */ --r: 22px; --r-in: 14px; --gutter: clamp(20px, 4vw, 64px); --max: 1400px; --sec: clamp(96px, 11vw, 160px); --ease: cubic-bezier(.16, 1, .3, 1); } /* Oscuro por preferencia del sistema (salvo elección explícita de claro) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b0c0e; --bg2: #101215; --surf: #16181c; --surf2: #1e2126; --line: rgba(243, 241, 236, .09); --line2: rgba(243, 241, 236, .16); --text: #f3f1ec; --muted: #a39f97; --dim: #6d6a64; --accent: #e3262c; --accent-2: #ff3d43; --accent-deep: #8d1418; --accent-soft: rgba(227, 38, 44, .12); --glass: rgba(16, 18, 21, .42); --glass-solid: rgba(14, 16, 19, .60); --sheen: .12; --bezel: rgba(243, 241, 236, .05); --shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .06); --scrim-o: .55; --hero-bg-o: .32; --grain-o: .055; --logo-light: none; --logo-dark: block; } } /* Oscuro por interruptor */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0c0e; --bg2: #101215; --surf: #16181c; --surf2: #1e2126; --line: rgba(243, 241, 236, .09); --line2: rgba(243, 241, 236, .16); --text: #f3f1ec; --muted: #a39f97; --dim: #6d6a64; --accent: #e3262c; --accent-2: #ff3d43; --accent-deep: #8d1418; --accent-soft: rgba(227, 38, 44, .12); --glass: rgba(16, 18, 21, .42); --glass-solid: rgba(14, 16, 19, .60); --sheen: .12; --bezel: rgba(243, 241, 236, .05); --shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .06); --scrim-o: .55; --hero-bg-o: .32; --grain-o: .055; --logo-light: none; --logo-dark: block; }