/* ============================================================ MAESTRELLO TECH — Design System · tokens.css v1.0.0 · 2026-09-15 Fonte da verdade: tech.maestrello.com.br (LP no ar) + logo travado em 15/09/2026. Deriva do Design System Maestrello v2.0 (marsala/dourado) com o "sotaque tech" (safira/ciano) e tratamento dark-first. ORDEM DE IMPORT: tokens.css → logo.css → components.css TEMA: escuro é o padrão (:root). Claro = , ou preferência do sistema quando não há escolha explícita (mecanismo lua/sol: ver theme.js). REGRA: componentes consomem os TOKENS DE PAPEL (--accent, --btn-primary-bg, --logo-ink…), nunca cores cruas. Trocar tema = trocar tokens. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Manrope:wght@500;600;700;800&family=Rubik:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap'); :root{ color-scheme:dark; /* ---------- superfícies ---------- */ --ground:#09080F; --ground-2:#0E0A16; --surface:#160F21; --surface-2:#1E1530; --surface-3:#251A38; --line:rgba(233,214,225,.10); --line-strong:rgba(233,214,225,.20); /* ---------- texto ---------- */ --ink:#F5EFF4; --ink-muted:#BCACB9; --ink-faint:#8B7B89; /* ---------- marca (herdada da Advocacia) ---------- */ --marsala:#7C2841; --marsala-lift:#A33B59; --marsala-dark:#5D1F2E; --mauve:#BC6E88; --gold-1:#FBEDB6; --gold-2:#E6C56B; --gold-3:#CFA23F; --gold:#E6C56B; /* ---------- sotaque tech ---------- */ --sapphire:#4B7BFF; --sapphire-soft:#84A6FF; --cyan:#46D8E6; /* ---------- semânticas ---------- */ --ok:#41C86C; --warn:#F5A524; --risk:#FF5C6C; --whatsapp:#25D366; /* ---------- papéis (o que os componentes consomem) ---------- */ --accent:var(--gold-2); /* eyebrows, títulos de painel, ícones de marca */ --accent-strong:var(--gold-1); --logo-ink:var(--gold-2); --logo-gradient:linear-gradient(120deg,#FBEDB6,#E6C56B 52%,#CFA23F); --logo-rule:var(--gold-2); --logo-sub:var(--sapphire); /* "LEGAL TECH PROVIDER" = cor do nó do emblema */ --btn-primary-bg:linear-gradient(135deg,var(--gold-1),var(--gold-2)); --btn-primary-ink:#160B03; --btn-primary-shadow:0 10px 30px -10px rgba(230,197,107,.7); --btn-primary-shadow-hover:0 16px 40px -12px rgba(230,197,107,.85); --header-bg:linear-gradient(180deg,rgba(9,8,15,.88),rgba(9,8,15,.5)); --glass:rgba(255,255,255,.04); --glass-hover:rgba(255,255,255,.08); --focus:var(--sapphire); --selection-bg:var(--marsala-lift); --selection-ink:#FFFFFF; --shadow-card:0 26px 50px -24px rgba(0,0,0,.85); --shadow-tile:0 12px 26px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06); --glow-gold:0 0 10px rgba(230,197,107,.55); /* ---------- tipografia ---------- */ --font-logo:"Cinzel",Georgia,"Times New Roman",serif; /* SÓ no lockup da marca */ --font-head:"Manrope","Helvetica Neue",Arial,sans-serif; --font-body:"Rubik","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --text-base:17px; --leading-base:1.65; /* ---------- layout ---------- */ --maxw:1200px; --gutter:24px; --radius:16px; --radius-lg:22px; --radius-xl:28px; --radius-pill:50px; /* assinatura Maestrello: botões sempre pill */ --radius-full:9999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --z-header:50; --z-float:60; --z-modal:100; --z-toast:110; --ease:cubic-bezier(.2,.7,.2,1); } /* ============================================================ TEMA CLARO — escolha explícita (toggle sol) Regra de marca: dourado sobre fundo claro APAGA → marca vira marsala, traço dourado num tom fechado, azul um tom mais fundo pra legibilidade. ============================================================ */ :root[data-theme="light"]{ color-scheme:light; --ground:#FFFFFF; --ground-2:#F7F4F6; --surface:#FFFFFF; --surface-2:#FAF2F4; --surface-3:#F2E6EB; --line:rgba(124,40,65,.12); --line-strong:rgba(124,40,65,.24); --ink:#232323; --ink-muted:#4B4550; --ink-faint:#828282; --gold-1:#CFA23F; --gold-2:#B9831F; --gold-3:#8F6412; --gold:#B9831F; --sapphire:#3E63D6; --sapphire-soft:#5A7BE6; --cyan:#0FA3B1; --ok:#1F9D4C; --warn:#B8770A; --risk:#D63A4A; --accent:var(--marsala); --accent-strong:var(--marsala-dark); --logo-ink:var(--marsala); --logo-gradient:linear-gradient(var(--marsala),var(--marsala)); --logo-rule:#B9831F; --logo-sub:#3E63D6; --btn-primary-bg:linear-gradient(135deg,var(--marsala-lift),var(--marsala)); --btn-primary-ink:#FFFFFF; --btn-primary-shadow:0 10px 30px -12px rgba(124,40,65,.45); --btn-primary-shadow-hover:0 16px 40px -14px rgba(124,40,65,.55); --header-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75)); --glass:rgba(124,40,65,.04); --glass-hover:rgba(124,40,65,.08); --shadow-card:0 26px 50px -30px rgba(31,35,44,.35); --shadow-tile:0 12px 26px -16px rgba(31,35,44,.3),inset 0 1px 0 rgba(255,255,255,.8); --glow-gold:0 0 10px rgba(185,131,31,.35); } /* TEMA CLARO — preferência do sistema, quando o usuário ainda não escolheu */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme:light; --ground:#FFFFFF; --ground-2:#F7F4F6; --surface:#FFFFFF; --surface-2:#FAF2F4; --surface-3:#F2E6EB; --line:rgba(124,40,65,.12); --line-strong:rgba(124,40,65,.24); --ink:#232323; --ink-muted:#4B4550; --ink-faint:#828282; --gold-1:#CFA23F; --gold-2:#B9831F; --gold-3:#8F6412; --gold:#B9831F; --sapphire:#3E63D6; --sapphire-soft:#5A7BE6; --cyan:#0FA3B1; --ok:#1F9D4C; --warn:#B8770A; --risk:#D63A4A; --accent:var(--marsala); --accent-strong:var(--marsala-dark); --logo-ink:var(--marsala); --logo-gradient:linear-gradient(var(--marsala),var(--marsala)); --logo-rule:#B9831F; --logo-sub:#3E63D6; --btn-primary-bg:linear-gradient(135deg,var(--marsala-lift),var(--marsala)); --btn-primary-ink:#FFFFFF; --btn-primary-shadow:0 10px 30px -12px rgba(124,40,65,.45); --btn-primary-shadow-hover:0 16px 40px -14px rgba(124,40,65,.55); --header-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75)); --glass:rgba(124,40,65,.04); --glass-hover:rgba(124,40,65,.08); --shadow-card:0 26px 50px -30px rgba(31,35,44,.35); --shadow-tile:0 12px 26px -16px rgba(31,35,44,.3),inset 0 1px 0 rgba(255,255,255,.8); --glow-gold:0 0 10px rgba(185,131,31,.35); } } /* ============================================================ BASE (idêntica ao site; sem scroll-behavior:smooth — é app, não LP) ============================================================ */ *{box-sizing:border-box} html,body{margin:0} body{ background:var(--ground);color:var(--ink-muted); font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-base); -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--ink);margin:0;line-height:1.1;text-wrap:balance} h1{font-size:clamp(37px,4.9vw,60px);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em} h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.01em} h4{font-size:19px;font-weight:800} ::selection{background:var(--selection-bg);color:var(--selection-ink)} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .grad-text{background:var(--logo-gradient);-webkit-background-clip:text;background-clip:text;color:transparent} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} }