/* ═════════════════════════════════════════════════════════════ SANBERNARDA.COM — DESIGN TOKENS · UAU 2026 Paleta poster: laranja blaze ⇄ índigo · ouro · magenta · lilás Arquitetura: 1. PRIMITIVES (--dv-*) cores fixas da marca, nunca invertem 2. STAGES (--stage-*) palcos: void / paper / blaze / vault 3. DARK (:root) void + aurora + calor 4. LIGHT (body:not(.dark-theme)) papel + névoa + calor 5. TIPOGRAFIA (inalterada) Aplicação visual: theme-brand.css (carregado por último). Aqui só existem variáveis. ═════════════════════════════════════════════════════════════ */ :root { /* ── 1 · PRIMITIVES ─────────────────────────────────────── */ /* Quentes — laranja blaze dos posters, ouro de highlight */ --dv-orange: #FF5F00; --dv-orange-hot: #FF8A1A; --dv-orange-deep: #E04A00; --dv-coral: #FF9A5A; --dv-coral-hot: #FF7E47; --dv-gold: #FFD166; /* Frios — magenta do FAQ + violeta elétrico */ --dv-magenta: #E23A8C; --dv-magenta-soft: #C47AE0; --dv-lilac: #9B7BFF; --dv-mauve: #7B61C9; --dv-lavender: #A78BFA; --dv-violet: #6A5ACD; --dv-periwinkle: #C4B5FD; /* Índigos — nomes --dv-plum-* mantidos por compat */ --dv-plum-950: #0D0D1A; --dv-plum-900: #16162E; --dv-plum-800: #1E1A40; --dv-plum-700: #2E2460; --dv-plum-600: #4A3A8A; --dv-plum-500: #6E5AA8; /* Claros — off-white frio com véu lavanda */ --dv-cream-50: #F5F5FA; --dv-cream-100: #ECEAF4; --dv-cream-200: #DDD9EA; /* Neutros */ --dv-white: #FFFFFF; --dv-ink: #12121F; --dv-ink-blaze: #1E0A32; /* RGB helpers — glows e veils */ --dv-orange-rgb: 255, 95, 0; --dv-magenta-rgb: 226, 58, 140; --dv-lavender-rgb: 167, 139, 250; --dv-lilac-rgb: 155, 123, 255; --dv-plum-rgb: 22, 22, 46; --dv-cream-rgb: 245, 245, 250; --dv-gold-rgb: 255, 209, 102; --dv-ink-rgb: 18, 18, 31; /* Gradientes de marca — índigo derretendo em laranja com ouro */ --dv-gradient: linear-gradient(135deg, var(--dv-orange) 0%, var(--dv-coral) 28%, var(--dv-magenta) 55%, var(--dv-lilac) 100%); --dv-gradient-soft: linear-gradient(160deg, var(--dv-coral) 0%, var(--dv-lilac) 58%, var(--dv-violet) 100%); --dv-gradient-poster: radial-gradient(120% 90% at 74% 92%, rgba(255, 138, 26, 0.92) 0%, rgba(255, 154, 90, 0.42) 34%, rgba(255, 154, 90, 0) 62%), linear-gradient(168deg, var(--dv-lilac) 0%, #8A6AE8 34%, var(--dv-magenta) 58%, var(--dv-coral) 80%, var(--dv-orange) 100%); --dv-gradient-bloom: radial-gradient(90% 110% at 30% 20%, rgba(var(--dv-lilac-rgb), 0.95) 0%, rgba(var(--dv-lilac-rgb), 0) 55%), radial-gradient(110% 120% at 72% 85%, var(--dv-orange) 0%, var(--dv-coral) 38%, var(--dv-magenta) 68%, var(--dv-lilac) 100%); --dv-gradient-veil: radial-gradient(80% 90% at 78% 88%, rgba(var(--dv-orange-rgb), 0.28) 0%, rgba(var(--dv-orange-rgb), 0) 58%), radial-gradient(90% 100% at 18% 12%, rgba(var(--dv-lilac-rgb), 0.24) 0%, rgba(var(--dv-lilac-rgb), 0) 60%); --dv-gradient-veil-paper: radial-gradient(70% 80% at 88% 8%, rgba(var(--dv-orange-rgb), 0.16) 0%, transparent 55%), radial-gradient(80% 90% at 8% 92%, rgba(var(--dv-lilac-rgb), 0.18) 0%, transparent 58%); /* ── 2 · STAGES (palcos constantes nos dois temas) ──────── */ --stage-void: var(--dv-plum-950); --stage-paper: var(--dv-cream-50); --stage-blaze: var(--dv-orange); --stage-vault: #1A0828; --bg-void: var(--stage-void); --bg-paper: var(--stage-paper); --bg-blaze: var(--stage-blaze); --bg-vault: var(--stage-vault); /* ── 3 · TEMA ESCURO (padrão) — void + aurora + calor ───── */ --bg-base: var(--stage-void); --bg-surface: var(--dv-plum-900); --bg-surface-alt: var(--dv-plum-800); --bg-color: var(--dv-plum-800); --ink: var(--dv-cream-50); --muted: #C4B8D8; --faint: #8A7EA8; --accent: var(--dv-orange); --accent-hot: var(--dv-orange-hot); --glow: rgba(var(--dv-orange-rgb), 0.55); --edge: rgba(var(--dv-lilac-rgb), 0.22); --edge-strong: rgba(var(--dv-lilac-rgb), 0.38); --aurora-a: rgba(var(--dv-lilac-rgb), 0.28); --aurora-b: rgba(var(--dv-magenta-rgb), 0.22); --heat: rgba(var(--dv-orange-rgb), 0.26); --cc-black: var(--dv-plum-950); --cc-navy: var(--dv-plum-900); --cc-charcoal: var(--dv-plum-900); --cc-surface: var(--dv-plum-800); --cc-input-bg: var(--dv-plum-800); --cc-border: var(--dv-plum-700); --cc-border-soft: rgba(var(--dv-lilac-rgb), 0.22); --cc-border-light: var(--dv-periwinkle); --cc-orange: var(--dv-orange); --cc-orange-hover: var(--dv-orange-hot); --cc-orange-glow: #3A1A10; --cc-white: var(--dv-white); --cc-gray: #C4B8D8; --cc-gray-muted: #8A7EA8; --cc-cyan: var(--dv-lavender); --cc-green: #22C55E; --cc-orange-rgb: var(--dv-orange-rgb); --cc-lavender-rgb: var(--dv-lavender-rgb); --cc-brand-orange: var(--dv-orange); --cc-brand-lavender: var(--dv-lavender); --cc-brand-violet: var(--dv-violet); --cc-brand-plum: var(--dv-plum-900); --cc-brand-plum-deep: var(--dv-plum-950); --cc-brand-cream: var(--dv-cream-50); --cc-brand-ink: var(--dv-ink); --cc-brand-white: var(--dv-white); --cc-gradient-brand: var(--dv-gradient); --cor-primaria: var(--cc-navy); --cor-secundaria: var(--cc-orange); --cor-cta: var(--cc-orange); --cor-cta-hover: var(--cc-orange-hover); --cor-hover: var(--cc-orange-hover); --cor-fundo: var(--cc-black); --cor-texto: var(--cc-white); --brand-primary: var(--cc-navy); --brand-accent: var(--cc-orange); --text-primary: var(--ink); --text-muted: var(--muted); --text-secondary: var(--muted); --text-on-dark: var(--dv-cream-50); --border-color: var(--edge); --border-strong: var(--edge-strong); --support-teal: var(--cc-cyan); --brut-acc: var(--cc-orange); --brut-ink: var(--dv-plum-950); --nb-acc: var(--cc-orange); --nb-ink: var(--dv-plum-900); --font-display: 'Tektur', sans-serif; --font-body: 'DM Mono', 'Courier New', monospace; --font-mono: 'DM Mono', 'Courier New', monospace; --fonte-titulo: 'Tektur', sans-serif; --fonte-corpo: 'DM Mono', 'Courier New', monospace; --fonte-numero: 'Tektur', sans-serif; --fonte-botao: 'Tektur', sans-serif; --orange-brut-edge: var(--dv-plum-950); --orange-brut-chad: var(--dv-white); --orange-brut-depth: 6px; --orange-brut-glow: 0 4px 22px rgba(var(--dv-orange-rgb), 0.55), 0 0 42px rgba(var(--dv-orange-rgb), 0.32), 0 0 88px rgba(var(--dv-magenta-rgb), 0.16); --cta-brut-glow: var(--orange-brut-glow); } body.dark-theme { color-scheme: dark; } /* ── 4 · TEMA CLARO — papel + névoa lilás + calor ────────── */ html.cc-theme-light, html.cc-theme-light body, body:not(.dark-theme) { color-scheme: light; --bg-base: var(--stage-paper); --bg-surface: var(--dv-white); --bg-surface-alt: var(--dv-cream-100); --bg-color: var(--dv-white); --ink: var(--dv-ink); --muted: #3D3558; --faint: #6A6288; --accent: var(--dv-orange); --accent-hot: var(--dv-orange-deep); --glow: rgba(var(--dv-orange-rgb), 0.32); --edge: rgba(var(--dv-plum-rgb), 0.14); --edge-strong: rgba(var(--dv-plum-rgb), 0.28); --aurora-a: rgba(var(--dv-lilac-rgb), 0.20); --aurora-b: rgba(var(--dv-magenta-rgb), 0.14); --heat: rgba(var(--dv-orange-rgb), 0.18); --cc-black: var(--dv-cream-50); --cc-navy: var(--dv-cream-100); --cc-charcoal: var(--dv-white); --cc-surface: var(--dv-white); --cc-input-bg: var(--dv-white); --cc-border: var(--dv-cream-200); --cc-border-soft: rgba(var(--dv-plum-rgb), 0.12); --cc-border-light: var(--dv-plum-900); --cc-orange: var(--dv-orange); --cc-orange-hover: var(--dv-orange-deep); --cc-orange-glow: #FFE4D4; --cc-white: var(--dv-ink); --cc-gray: #3D3558; --cc-gray-muted: #6A6288; --cc-cyan: var(--dv-violet); --cor-primaria: var(--dv-plum-900); --cor-secundaria: var(--cc-orange); --cor-cta: var(--cc-orange); --cor-cta-hover: var(--cc-orange-hover); --cor-hover: var(--cc-orange-hover); --cor-fundo: var(--dv-cream-50); --cor-texto: var(--dv-ink); --brand-primary: var(--dv-plum-900); --brand-accent: var(--cc-orange); --text-primary: var(--ink); --text-muted: var(--muted); --text-secondary: var(--muted); --text-on-dark: var(--dv-cream-50); --border-color: var(--edge); --border-strong: var(--edge-strong); --brut-ink: var(--dv-plum-900); --nb-ink: var(--dv-plum-900); --orange-brut-edge: var(--dv-plum-900); --orange-brut-chad: var(--dv-cream-50); --orange-brut-glow: 0 4px 20px rgba(var(--dv-orange-rgb), 0.32), 0 0 40px rgba(var(--dv-magenta-rgb), 0.14), 0 0 64px rgba(var(--dv-lilac-rgb), 0.10); } html, body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); } /* ── 5 · TIPOGRAFIA (tokens display / mono) ──────────────── */ h1, h2, h3, h4, h5, h6, .logo, .sec-head__title, .spec-header__title, .proc-header__title, .cs2-title, .proof__title, .hero-title-v3, .hero-title-v3 .hero-line, .btn-nav-cta, .btn-cta, .btn-hero { font-family: var(--font-display); } .nav-menu a, .sec-head__label, .spec-header__label, .proc-header__label, .proof__label, .cs2-kicker, [class*="__meta"], .cl-num, .cs2-num { font-family: var(--font-mono); } html, body { font-family: var(--font-body) !important; } .logo, .hero-title-v3, .hero-title-v3 .hero-line, h1, h2, h3, h4, .sec-head__title, .spec-header__title, .proc-header__title, .cs2-title, .proof__title, .btn-nav-cta, .btn-cta, .btn-hero, .btn-nav-cta .btn-inner, .footer-hero__brand, html.cc-brut body :is(.btn-nav-cta, .btn-hero) { font-family: var(--font-display) !important; } .nav-menu a, .sec-head__label, .spec-header__label, .proc-header__label, .cs2-kicker, .cl-num, .cs2-num, .sf-telemetry, .h26-edge { font-family: var(--font-mono) !important; }