/* ============================================================ PUBLICA SMART — DESIGN TOKENS (fuente de verdad) Sistema unico, resultado de reconciliar: - Estrategia de Marketing/hecho con chat gpt/*.md (doc aspiracional) - code/app/static/style.css (paleta clara real, previa) - templates/landing.html (paleta "paper" editorial local) Decisiones cerradas (2026-08-13): 1. Tema oscuro (Obsidian) como base del producto. 2. Tipografia: Fraunces (display) + Plus Jakarta Sans (UI/body). (Se probo Manrope + Inter, alineado al moodboard de referencia, pero no gusto en la revision visual — se revirtio a esta.) 3. Este archivo es el unico vocabulario de tokens del proyecto. Este archivo esta enlazado desde landing.html (pagina piloto). No tiene efecto visual en el resto del sitio hasta que se importe o desde un en el . ============================================================ */ :root { /* ---------------------------------------------------------- COLOR — marca ---------------------------------------------------------- */ --color-brand: #ff6a00; --color-brand-hover: #ff7a1a; --color-brand-active: #e85f00; /* ---------------------------------------------------------- COLOR — superficies (dark) ---------------------------------------------------------- */ --color-bg-primary: #0b0c0e; /* Obsidian — fondo base */ --color-bg-secondary: #151719; /* superficie / card */ --color-bg-tertiary: #25282c; /* Graphite — superficie elevada */ /* ---------------------------------------------------------- COLOR — texto (dark) ---------------------------------------------------------- */ --color-text-primary: #f5f3ee; /* Ivory */ --color-text-secondary: #d9dce0; /* Mist */ --color-text-muted: #92979d; /* ---------------------------------------------------------- COLOR — bordes (dark) ---------------------------------------------------------- */ --color-border-subtle: rgba(255, 255, 255, 0.08); --color-border-default: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.18); /* ---------------------------------------------------------- COLOR — tema claro (paginas que aun lo necesiten, ej. PDF/email) ---------------------------------------------------------- */ --color-bg-primary-light: #f5f3ee; --color-surface-light: #ffffff; --color-text-primary-light: #0b0c0e; --color-text-secondary-light: #4b5056; --color-border-light: rgba(11, 12, 14, 0.1); /* ---------------------------------------------------------- COLOR — estado (nunca usar solo color, siempre + icono/texto) ---------------------------------------------------------- */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #60a5fa; /* ---------------------------------------------------------- TIPOGRAFIA ---------------------------------------------------------- */ --font-display: "Fraunces", Georgia, "Iowan Old Style", serif; --font-ui: "Plus Jakarta Sans", "Segoe UI", -apple-system, Roboto, Arial, sans-serif; /* Fraunces: Display, H1, H2 (grandes momentos de marca). Plus Jakarta Sans: H3 en adelante + todo lo funcional. */ --text-display: 64px; --text-h1: 48px; --text-h2: 36px; --text-h3: 28px; --text-h4: 22px; --text-body-lg: 18px; --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --leading-display: 1.05; --leading-heading: 1.1; --leading-body: 1.5; --leading-body-lg: 1.55; /* ---------------------------------------------------------- ESPACIADO (base 8px, soporte 4px) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 128px; /* ---------------------------------------------------------- RADIOS ---------------------------------------------------------- */ --radius-sm: 4px; /* controles densos */ --radius-md: 6px; /* inputs / componentes pequenos */ --radius-lg: 8px; /* cards estandar */ --radius-xl: 12px; /* cards grandes / media */ --radius-2xl: 16px; /* contenedores prominentes */ --radius-3xl: 24px; /* superficies de marketing */ --radius-pill: 999px; /* tags, badges, filtros */ /* ---------------------------------------------------------- SOMBRAS (uso moderado) ---------------------------------------------------------- */ --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 16px 50px rgba(0, 0, 0, 0.3); /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 350ms; --ease-standard: ease-out; --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-max: 1280px; --grid-gap: 24px; }