/* ============================================================ cedares — Tokens del sistema de diseño Fase 1 (Metodología v2 §4.1): fuente de verdad de color, tipografía, spacing y radius. DESTILADOS del Figma "Exposición Virtual 2026". Fuente de verdad estructurada: _docs/cedares.tokens.json Figma: file TKkdlXTbWltOPOCuF5N5yh · color 2-4120 · tipografía 2-8633 ── La web es OSCURA: tema oscuro por defecto (refs nodes 162-3303, 271-554). ============================================================ */ :root { /* --- Paleta de marca (valores crudos, fijos; usados como fills de card y acentos) --- */ --ced-azul-oscuro: #111132; --ced-azul-medio: #0052a1; --ced-celeste: #007ac2; --ced-morado: #733d89; --ced-magenta: #e41069; /* CTAs circulares */ --ced-amarillo: #f7ac03; /* labels / acento */ --ced-negro: #000000; --ced-blanco: #ffffff; /* Variantes pastel (Figma "dark theme value") para texto/enlaces de marca sobre fondo oscuro */ --ced-azul-oscuro-soft: #d2e0fa; --ced-azul-medio-soft: #83b9ed; --ced-celeste-soft: #b6e4ff; --ced-morado-soft: #e7cff0; /* --- Semánticos: TEMA OSCURO por defecto (la web es oscura) --- */ --ced-bg: #121e42; /* Figma Bg_color (fondo de página) */ --ced-bg-deep: #0e1630; /* sub-footer / secciones profundas (provisional) */ --ced-surface: #1a2348; /* superficie elevada (provisional) */ --ced-text: rgba(255, 255, 255, 0.88); --ced-text-muted: rgba(255, 255, 255, 0.65); --ced-heading: var(--ced-blanco); --ced-label: var(--ced-amarillo); /* eyebrows / títulos de columna del footer */ --ced-primary: var(--ced-azul-medio); --ced-primary-2: var(--ced-celeste); --ced-accent: var(--ced-magenta); --ced-accent-2: var(--ced-amarillo); /* --- Tipografía: Roboto (self-hosted, ver fonts.css) --- */ --ced-font-base: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --ced-font-display: var(--ced-font-base); --ced-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; --ced-fw-regular: 400; --ced-fw-semibold: 600; --ced-fw-bold: 700; /* Escala tipográfica (del Style Guide: size / line-height) */ --ced-text-base: 0.875rem; /* 14 / 22 */ --ced-text-base-lh: 1.375rem; --ced-h2: 1.875rem; /* 30 / 38 */ --ced-h2-lh: 2.375rem; --ced-h1: 2.375rem; /* 38 / 46 */ --ced-h1-lh: 2.875rem; /* --- Escala de spacing (provisional, base 4px) --- */ --ced-space-1: 0.25rem; --ced-space-2: 0.5rem; --ced-space-3: 1rem; --ced-space-4: 1.5rem; --ced-space-5: 2rem; --ced-space-6: 3rem; --ced-space-7: 4rem; /* --- Radius (provisional) --- */ --ced-radius-sm: 4px; --ced-radius: 8px; --ced-radius-lg: 16px; /* --- Layout --- */ --ced-container: 1200px; } /* ============================================================ Tema CLARO — opt-in vía (Style Guide). No es el tema de la web; queda disponible por si se usa en alguna vista. ============================================================ */ [data-theme="light"] { --ced-bg: var(--ced-blanco); --ced-bg-deep: #f4f5f7; --ced-surface: var(--ced-blanco); --ced-text: rgba(0, 0, 0, 0.88); --ced-text-muted: rgba(0, 0, 0, 0.65); --ced-heading: var(--ced-azul-oscuro); }