/* ============================================================ tokens.css — Design tokens de Pindana Color por tema (light / dark) + tokens no cromáticos (FASE 1). Regla de oro: los componentes NO usan hex directos — usan estos tokens. El tema se controla con data-bs-theme en (nativo de Bootstrap 5.3). ============================================================ */ :root, [data-bs-theme="light"] { --c-bg: #FFFFFF; /* fondo principal (hero, cards) */ --c-bg-alt: #F5F4F0; /* secciones alternas (blanco hueso) */ --c-bg-invert: #0D1B2A; /* bloques oscuros (stack) */ --c-text: #2C2C2A; /* cuerpo de texto (gris carbón) */ --c-heading: #0D1B2A; /* titulares (azul noche) */ --c-brand: #1877BD; /* azul pindana (AA: 4.76:1 s/ blanco como texto) */ --c-accent: #E85D2A; /* naranja acción: fondos, barras, botones */ --c-accent-text: #BF400A; /* naranja TEXTO: AA en claro y en bg-alt (5.31 / 4.83) */ --c-border: rgba(0, 0, 0, 0.08); --c-on-brand: #FFFFFF; /* texto sobre fondo brand (AA: 4.76:1) */ } [data-bs-theme="dark"] { --c-bg: #0D1B2A; /* noche como fondo base */ --c-bg-alt: #0A1622; /* alterna ligeramente más oscura */ --c-bg-invert: #14263B; /* cards / bloques elevados */ --c-text: rgba(245, 244, 240, 0.86); --c-heading: #F5F4F0; /* blanco hueso */ --c-brand: #4AA3E0; /* azul aclarado para contraste AA sobre oscuro */ --c-accent: #FF6B3D; /* naranja aclarado: fondos, barras, botones */ --c-accent-text: #FF6B3D; /* en dark ya pasa como texto (6.15:1) */ --c-border: rgba(255, 255, 255, 0.12); --c-on-brand: #0D1B2A; /* texto oscuro sobre brand claro (AA: 6.30:1) */ } /* ------------------------------------------------------------ Tokens no cromáticos — idénticos en ambos temas. Tipografía · espaciado de secciones · bordes y radios. ------------------------------------------------------------ */ :root { /* Tipografía (ver Google Fonts en head.php) */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Espaciado vertical de secciones */ --section-py: 7rem; /* desktop */ --section-py-sm: 4rem; /* móvil */ /* Texto sobre fondo naranja: oscuro en ambos temas (blanco falla AA) */ --c-on-accent: #0D1B2A; /* AA: 4.99:1 (light) · 6.15:1 (dark) */ /* Bordes y radios — estética suiza */ --radius-card: 0; /* cards sin radio */ --radius-btn: 3px; /* botones casi cuadrados */ --radius-pill: 100px; /* pills redondeadas */ --bar-accent: 4px; /* barra naranja del hero (Fase 3) */ --border-thin: 1px solid var(--c-border); }