/* * design-tokens.css — Lex Panta / Pantia * ───────────────────────────────────────────────────────────────────────────── * Tokens semánticos compartidos entre la landing pública (Lex Panta) y la app * Pantia. Importar en antes de cualquier otro CSS de la página: * * * * MAPEO VIEJO → NUEVO * ───────────────────────────────────────────────────────────────────────────── * Landing (index.html / nosotros.html / pricing/index.html): * --gold → --color-brand-gold * --gold-light → --color-brand-gold-light * --gold-dim → --color-brand-gold-dim * --ink → --color-surface-0 * --ink-2 → --color-surface-1 * --ink-3 → --color-surface-2 * --ink-4 → --color-surface-3 * --paper → --color-text-primary * --paper-dim → --color-text-secondary * --border → --color-border-brand * --pantia-indigo → --color-pantia-primary * --pantia-violet → --color-pantia-secondary * --pantia-surface → --color-pantia-surface (solo index.html) * --pantia-border → --color-border-pantia (solo index.html) * * App (app.html) — sistema púrpura independiente: * --app-gold → --color-brand-gold * --app-gold-l → --color-brand-gold-light * --app-gold-dim → --color-app-gold-dim * --app-gold-glow → --color-app-gold-glow * --app-bg → --color-app-bg * --app-surface → --color-app-surface * --app-surface2 → --color-app-surface2 * --app-surface3 → --color-app-surface3 * --app-border → --color-app-border * --app-border2 → --color-app-border2 * --app-text → --color-app-text * --app-muted → --color-app-muted * --app-dim → --color-app-dim * --app-blue → --color-app-blue * --app-blue-l → --color-app-blue-l * --app-blue-dim → --color-app-blue-dim * --app-green → --color-app-green * --app-green-dim → --color-app-green-dim * --app-red → --color-app-red * --app-red-dim → --color-app-red-dim * --app-amber → --color-app-amber * --app-amber-dim → --color-app-amber-dim * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ════════════════════════════════════════════════════ MARCA COMPARTIDA (landing + app) ════════════════════════════════════════════════════ */ --color-brand-gold: #C9A84C; --color-brand-gold-light: #E8C97A; --color-brand-gold-dim: rgba(201, 168, 76, 0.12); /* landing */ /* ════════════════════════════════════════════════════ PANTIA BRAND (colores de identidad del producto) ════════════════════════════════════════════════════ */ --color-pantia-primary: #6C63FF; /* índigo */ --color-pantia-secondary: #8B5CF6; /* violeta */ --color-pantia-surface: #2E1A47; /* superficie de tarjeta landing */ /* ════════════════════════════════════════════════════ SUPERFICIES LANDING (escala navy oscura) ════════════════════════════════════════════════════ */ --color-surface-0: #080c10; /* fondo base / --ink */ --color-surface-1: #0e1318; /* nivel 1 / --ink-2 */ --color-surface-2: #141b22; /* nivel 2 / --ink-3 */ --color-surface-3: #1a232c; /* nivel 3 / --ink-4 */ /* ════════════════════════════════════════════════════ TEXTO LANDING ════════════════════════════════════════════════════ */ --color-text-primary: #e2dfd8; --color-text-secondary: rgba(226, 223, 216, 0.55); /* ════════════════════════════════════════════════════ BORDES ════════════════════════════════════════════════════ */ --color-border-brand: rgba(201, 168, 76, 0.15); /* landing — dorado */ --color-border-pantia: rgba(108, 99, 255, 0.22); /* landing — índigo */ /* ════════════════════════════════════════════════════ RADIOS (landing) ════════════════════════════════════════════════════ */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; /* ════════════════════════════════════════════════════ APP — SUPERFICIES (paleta púrpura Pantia) ════════════════════════════════════════════════════ */ --color-app-bg: #261A3F; --color-app-surface: #322050; --color-app-surface2: #443363; --color-app-surface3: #4F3D6F; /* ════════════════════════════════════════════════════ APP — BORDES ════════════════════════════════════════════════════ */ --color-app-border: rgba(240, 238, 248, 0.08); --color-app-border2: rgba(240, 238, 248, 0.14); /* ════════════════════════════════════════════════════ APP — GOLD (alpha ligeramente mayor que landing) ════════════════════════════════════════════════════ */ --color-app-gold-dim: rgba(201, 168, 76, 0.14); --color-app-gold-glow: rgba(201, 168, 76, 0.25); /* ════════════════════════════════════════════════════ APP — TEXTO ════════════════════════════════════════════════════ */ --color-app-text: #F0EEF8; --color-app-muted: #9B96B8; --color-app-dim: #5A5570; /* ════════════════════════════════════════════════════ APP — COLORES DE ACENTO ════════════════════════════════════════════════════ */ --color-app-blue: #7B6FD8; --color-app-blue-l: #A89FEA; --color-app-blue-dim: rgba(123, 111, 216, 0.14); --color-app-green: #2ECC8A; --color-app-green-dim: rgba(46, 204, 138, 0.12); --color-app-red: #E05C5C; --color-app-red-dim: rgba(224, 92, 92, 0.12); --color-app-amber: #E8A23A; --color-app-amber-dim: rgba(232, 162, 58, 0.12); }