/* ═════════════════════════════════════════════════════════════ SANBERNARDA.COM — DESIGN TOKENS · BRAND 2026 Paleta Devloopy: laranja blaze → lavanda · plum profundo · cream Arquitetura: 1. PRIMITIVES (--dv-*) cores fixas da marca, nunca invertem 2. DARK (:root + body.dark-theme) tema padrão do site 3. LIGHT (html.cc-theme-light / body:not(.dark-theme)) 4. TIPOGRAFIA (inalterada) A aplicação visual dos temas vive em theme-brand.css (carregado por último). Aqui só existem variáveis. ═════════════════════════════════════════════════════════════ */ :root { /* ── 1 · PRIMITIVES ─────────────────────────────────────── */ /* Quentes */ --dv-orange: #FF5C14; /* blaze — CTA / acento principal */ --dv-orange-hot: #FF7A38; /* hover */ --dv-orange-deep: #E84E0A; /* hover em fundo claro */ --dv-coral: #F29479; /* meio do gradiente */ /* Frios — recalibrados nas referências Devloopy 2026 */ --dv-magenta: #DA8BCB; /* transição rosa-púrpura (ref #D890CC) */ --dv-lilac: #CC96E8; /* lilás mauve das capas (ref #CC90E4) */ --dv-mauve: #A987C9; /* lilás médio de fundo (ref #A884C0) */ --dv-lavender: #C79CEF; /* lavanda — interativo (puxada ao lilás ref) */ --dv-violet: #8B6CFF; /* violeta — links em claro */ --dv-periwinkle: #B3AFFC; /* fundo accent claro */ /* Plums (escuros) — matiz violeta puro da referência (#180024) */ --dv-plum-950: #150122; /* canvas escuro */ --dv-plum-900: #1E0430; /* painéis / ink de marca */ --dv-plum-800: #2A0C42; /* superfícies */ --dv-plum-700: #3B1E5C; /* bordas escuras */ --dv-plum-600: #55357E; /* bordas fortes / muted escuro */ /* Creams (claros) */ --dv-cream-50: #FBF7F2; /* canvas claro */ --dv-cream-100: #F4EDE4; /* superfície alternativa */ --dv-cream-200: #E9DFD3; /* bordas claras */ /* Neutros */ --dv-white: #FFFFFF; --dv-ink: #16081F; /* texto em fundo claro */ /* RGB helpers */ --dv-orange-rgb: 255, 92, 20; --dv-lavender-rgb: 199, 156, 239; --dv-lilac-rgb: 204, 150, 232; --dv-plum-rgb: 30, 4, 48; --dv-cream-rgb: 251, 247, 242; /* Gradientes de marca — assinatura Devloopy: bloom difuso laranja ⇄ lilás, como nas capas/posters */ --dv-gradient: linear-gradient(135deg, var(--dv-orange) 0%, var(--dv-coral) 30%, var(--dv-magenta) 55%, var(--dv-lilac) 100%); --dv-gradient-soft: linear-gradient(160deg, var(--dv-coral) 0%, var(--dv-lilac) 60%, var(--dv-violet) 100%); /* Poster: lilás no topo derretendo em laranja (capa "We help you expand your future") */ --dv-gradient-poster: radial-gradient(120% 90% at 74% 92%, rgba(255, 122, 56, 0.9) 0%, rgba(242, 148, 121, 0.45) 34%, rgba(242, 148, 121, 0) 62%), linear-gradient(168deg, var(--dv-lilac) 0%, #C393E0 34%, var(--dv-magenta) 58%, var(--dv-coral) 80%, var(--dv-orange) 100%); /* Bloom: núcleo laranja irradiando no campo lilás (logo Devloopy) */ --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%); /* Véu: mesma composição em opacidade baixa, para atmosferas de seção */ --dv-gradient-veil: radial-gradient(80% 90% at 78% 88%, rgba(var(--dv-orange-rgb), 0.22) 0%, rgba(var(--dv-orange-rgb), 0) 58%), radial-gradient(90% 100% at 18% 12%, rgba(var(--dv-lilac-rgb), 0.18) 0%, rgba(var(--dv-lilac-rgb), 0) 60%); /* ── 2 · TEMA ESCURO (padrão do site) ───────────────────── */ --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: #2C1044; --cc-border-light: #C4B5E0; --cc-orange: var(--dv-orange); --cc-orange-hover: var(--dv-orange-hot); --cc-orange-glow: #351226; --cc-white: var(--dv-white); --cc-gray: #AF9FC4; --cc-gray-muted: #7A6690; --cc-cyan: var(--dv-lavender); --cc-green: #22C55E; /* compat com nomes antigos usados nos css */ --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); /* ── Aliases → sistema legado ── */ --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); --bg-base: var(--cc-black); --bg-surface: var(--cc-charcoal); --bg-surface-alt: var(--cc-navy); --bg-color: var(--cc-surface); --text-primary: var(--cc-white); --text-muted: var(--cc-gray); --text-secondary: var(--cc-gray); --text-on-dark: var(--cc-white); --border-color: var(--cc-border-soft); --border-strong: var(--cc-border); --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); /* Tipografia */ --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; /* Sombras brutalistas */ --orange-brut-edge: var(--dv-plum-950); --orange-brut-chad: var(--dv-white); --orange-brut-depth: 6px; --orange-brut-glow: 0 4px 18px rgba(var(--dv-orange-rgb), 0.45), 0 0 34px rgba(var(--dv-orange-rgb), 0.28), 0 0 72px rgba(var(--dv-orange-rgb), 0.14); --cta-brut-glow: var(--orange-brut-glow); } /* Escuro explícito (reforço quando o body ganha a classe) */ body.dark-theme { color-scheme: dark; } /* ── 3 · TEMA CLARO ──────────────────────────────────────── */ html.cc-theme-light, html.cc-theme-light body, body:not(.dark-theme) { color-scheme: light; --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: #EFE7DC; --cc-border-light: var(--dv-plum-900); --cc-orange: var(--dv-orange); --cc-orange-hover: var(--dv-orange-deep); --cc-orange-glow: #F8DECF; --cc-white: var(--dv-ink); /* “texto primário” em claro */ --cc-gray: #5F4B74; --cc-gray-muted: #907FA4; --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); --bg-base: var(--dv-cream-50); --bg-surface: var(--dv-white); --bg-surface-alt: var(--dv-cream-100); --bg-color: var(--dv-white); --text-primary: var(--dv-ink); --text-muted: #5F4B74; --text-secondary: #5F4B74; --text-on-dark: var(--dv-cream-50); --border-color: var(--cc-border-soft); --border-strong: var(--cc-border); --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 18px rgba(var(--dv-orange-rgb), 0.25), 0 0 34px rgba(var(--dv-lavender-rgb), 0.15); } /* ── Base ────────────────────────────────────────────────── */ html, body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); } /* ── 4 · 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); } /* §FONT-LOCK — força tokens tipográficos */ 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; }