/* ============================================================ BENTO — DESIGN TOKENS · v1 Estúdio Bento · Sistema de Design · 2026 Importe este arquivo no topo do projeto. Defina os temas no : ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root{ /* fontes */ --font-display:'Oswald',sans-serif; /* títulos/impacto · caixa alta · peso 500–600 */ --font-ui:'Inter',sans-serif; /* interface e corpo */ --font-mono:'Space Mono',monospace; /* labels, tokens, dados */ /* espectro iridescente (cores VIVAS — destaque e cor de cliente) */ --solar:#FF6A1A; --ember:#FF3D2E; --magenta:#E0218A; --violet:#7C3AED; --azure:#2563FF; --cyan:#16E0D0; --gold:#FFC53D; /* semânticas (status) */ --success:#22C58B; --warning:#FFC53D; --danger:#FF4536; --info:#2F8BFF; /* campo quente (base/acentos quentes) */ --warm-1:#E8551F; --warm-2:#F2842E; --warm-3:#F5B25C; /* cores de cliente — sempre VIVAS, sempre do espectro acima */ --c-cinemark:#E0218A; /* magenta */ --c-magalu:#2563FF; /* azure */ --c-tenda:#E8551F; /* warm */ --c-asus:#7C3AED; /* violet */ /* gradientes (assinatura, atmosfera e tintas de glass) */ --grad-iris:linear-gradient(100deg,#FF6A1A,#FF3D2E 22%,#E0218A 42%,#7C3AED 60%,#2563FF 76%,#16E0D0 90%); --grad-iris-conic:conic-gradient(from 200deg at 50% 50%,#FF6A1A,#FFC53D,#16E0D0,#2563FF,#7C3AED,#E0218A,#FF3D2E,#FF6A1A); --grad-warm:radial-gradient(120% 140% at 20% 0%,#F5B25C 0%,#F2842E 40%,#E8551F 100%); --grad-pearl-amber:linear-gradient(150deg,rgba(255,213,150,.30),rgba(255,106,26,.16) 55%,rgba(124,63,234,.12)); --grad-pearl-violet:linear-gradient(150deg,rgba(167,139,250,.28),rgba(37,99,255,.14) 60%,rgba(22,224,208,.10)); /* raio */ --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px; /* espaço / dimensões */ --pad-card:24px; --pad-y-btn:12px; --pad-x-btn:22px; --gap:16px; --fs-body:1rem; /* motion */ --t-fast:130ms; --t:240ms; --t-slow:520ms; --ease:cubic-bezier(.22,.61,.36,1); /* curva padrão */ --spring:cubic-bezier(.34,1.56,.64,1); /* toggles, pins, "molas" */ } /* densidade compacta */ :root[data-density="compact"]{ --pad-card:16px; --pad-y-btn:8px; --pad-x-btn:16px; --gap:10px; --fs-body:.9rem; --r-lg:16px; --r-md:11px; } /* TEMA ESCURO (padrão) */ :root[data-theme="dark"]{ --ink:#0B0A09; --ink-2:#131110; --surface:#1A1715; --surface-2:#241F1C; --raised:#2A2421; --line:rgba(255,247,238,.10); --line-2:rgba(255,247,238,.18); --fg:#FBF4EC; --fg-2:#C9BFB5; --fg-3:#8B8178; --glass:linear-gradient(150deg,rgba(255,213,150,.14),rgba(124,63,234,.09)); --field:#131110; --hover:rgba(255,255,255,.06); --skeleton:rgba(255,255,255,.07); --skeleton-2:rgba(255,255,255,.13); --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-3:0 24px 60px rgba(0,0,0,.55); --glow:0 0 0 1px rgba(255,255,255,.06),0 12px 40px rgba(255,106,26,.28),0 4px 16px rgba(124,63,234,.22); --grain:.05; } /* TEMA CLARO */ :root[data-theme="light"]{ --ink:#FBF6EF; --ink-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5EEE4; --raised:#FFFFFF; --line:rgba(40,28,18,.10); --line-2:rgba(40,28,18,.16); --fg:#1C1512; --fg-2:#5C5048; --fg-3:#928678; --glass:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,213,150,.35)); --field:#FFFFFF; --hover:rgba(40,28,18,.05); --skeleton:rgba(40,28,18,.06); --skeleton-2:rgba(40,28,18,.12); --sh-1:0 1px 2px rgba(80,50,20,.08); --sh-2:0 10px 30px rgba(120,70,30,.12); --sh-3:0 24px 60px rgba(120,70,30,.18); --glow:0 0 0 1px rgba(255,255,255,.6),0 14px 40px rgba(255,106,26,.2),0 4px 16px rgba(124,63,234,.12); --grain:.03; } /* base mínima recomendada */ html{ background:var(--ink); color:var(--fg); } body{ font-family:var(--font-ui); line-height:1.55; -webkit-font-smoothing:antialiased; } .display{ font-family:var(--font-display); text-transform:uppercase; font-weight:600; letter-spacing:.015em; line-height:.92; } .mono{ font-family:var(--font-mono); } @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }