/* ========================================================= ALESSANDRO VALE · ADVOGADOS ASSOCIADOS Design Tokens · v2.0 · 04/08/2026 Export gerado a partir de design-system-alessandro-vale.html, que permanece a fonte da verdade. Não edite este arquivo à mão: mudanças entram no HTML, ganham linha no changelog (seção 10 · Sistema) e são reexportadas aqui com a nova versão. BREAKING v1.x -> v2.0: - --action-bg deixa de ser Âmbar: agora é Pergaminho no tema escuro (ação por inversão de valor) e Terra no claro. - --ambar recalibrado de #FFBC7D para #C9955C; papel muda de "ação" para "fio e detalhe" (nunca campo, nunca botão). - Fontes: Newsreader + Archivo substituem The New Elegance, Amethysta, Roboto Slab e Roboto. DEPRECIADOS (removidos na v2.1): --grad-brand, --glow, --shadow-brand (hoje alias de --shadow-md), --font-slab (alias de Archivo; migre para --font-body + --tracking-label). Uso: importe este arquivo e aplique a classe "light" ao para o tema claro. O tema escuro (Raiz) é o canônico. Breakpoints canônicos (não são custom properties): 980px e 560px. Fontes (Google Fonts, licença OFL): Archivo:wght@300..700 · Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400 ========================================================= */ :root{ /* ---------- PALETA OFICIAL ---------- */ --terra:#543716; /* PRIMÁRIA · marca e ação sobre claro */ --raiz:#291805; /* PRIMÁRIA · base escura, canvas */ --bronze:#805C33; /* SECUNDÁRIA · apoio quente */ --pergaminho:#E8E1D7; /* SECUNDÁRIA · neutro claro / ação sobre escuro */ --ambar:#C9955C; /* DESTAQUE · fio e detalhe, nunca campo nem ação */ --offwhite:#F8F8F8; /* SECUNDÁRIA · superfície clara */ --branco:#FFFFFF; /* SECUNDÁRIA · texto sobre escuro */ /* ---------- GRADIENTE DE MARCA · DEPRECIADO v2.0 ---------- */ --grad-brand:linear-gradient(150deg,#291805 0%,#543716 52%,#805C33 100%); /* ---------- CAMPO DE COR ---------- */ --campo:var(--ink-700); /* campos dominantes com texto claro (12,7:1) */ /* ---------- ESCALA DE NEUTROS (terra · UI funcional) ---------- */ --ink-900:#1C1003; --ink-800:#291805; --ink-700:#3B2610; --ink-600:#543716; --ink-500:#6F4E2A; --ink-400:#8F7350; --ink-300:#B29A7C; --ink-200:#D1C1A8; --ink-100:#E8E1D7; --ink-050:#F5F1EA; /* ---------- TEMA ESCURO = canônico ---------- */ --bg:var(--raiz); --txt:#F6F1EA; --txt-2:rgba(232,225,215,.70); --surface-1:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(128,92,51,.22); --surface-warm:#33200A; --border:rgba(232,225,215,.15); --border-strong:rgba(232,225,215,.30); /* ---------- ACENTO LEGÍVEL ---------- */ --accent-text:var(--ambar); /* ---------- FOCO VISÍVEL (>= 3:1 sobre o entorno) ---------- */ --focus-ring:var(--ambar); --focus-halo:rgba(201,149,92,.30); /* ---------- BORDA DE CAMPO (>= 3:1 sobre o entorno) ---------- */ --border-input:rgba(232,225,215,.45); /* ---------- CAMADA SEMÂNTICA · AÇÃO ---------- Ação por inversão de valor: claro sobre escuro, Terra sobre claro. */ --action-bg:var(--pergaminho); --action-bg-hover:#DDD2BF; --on-action:var(--raiz); --action-border:transparent; --action-2-bg:var(--terra); --action-2-bg-hover:#654322; --on-action-2:#FFFFFF; /* ---------- CAMADA SEMÂNTICA · ACENTOS PEQUENOS ---------- Âmbar no escuro, Terra no claro. Fio, nunca área. */ --accent-solid:var(--ambar); --on-accent:var(--raiz); --accent-soft:rgba(201,149,92,.12); --accent-soft-border:rgba(201,149,92,.40); --accent-ring:rgba(201,149,92,.25); /* ---------- CAMADA SEMÂNTICA · FEEDBACK (rebaixada v2.0) ---------- */ --success:#52805F; --warning:#B3862B; --error:#C05450; --ok-text:#8FCB9E; --no-text:#F4979A; --warn-text:#F0C868; --success-soft:rgba(78,155,98,.18); --success-soft-border:rgba(78,155,98,.45); --warning-soft:rgba(224,161,0,.18); --warning-soft-border:rgba(224,161,0,.45); --star:#C79238; --txt-placeholder:var(--ink-300); /* ---------- ELEVAÇÃO (--glow e --shadow-brand DEPRECIADOS) ---------- */ --glow:radial-gradient(120% 90% at 50% 130%, rgba(201,149,92,.12), transparent 70%); --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 2px 14px -3px rgba(0,0,0,.50); --shadow-lg:0 16px 38px -12px rgba(0,0,0,.65); --shadow-brand:var(--shadow-md); /* ---------- TIPOGRAFIA · v2.0 ---------- */ --font-display:"Newsreader",Georgia,serif; --font-serif:"Newsreader",Georgia,"Times New Roman",serif; --font-slab:"Archivo",-apple-system,sans-serif; /* DEPRECIADO · alias */ --font-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; --fs-display-xl:clamp(2.75rem,6vw,4.5rem); --fs-display-lg:clamp(2.25rem,4.5vw,3.25rem); --fs-h1:clamp(1.875rem,3.6vw,2.5rem); --fs-h2:clamp(1.5rem,2.6vw,1.75rem); --fs-h3:1.375rem; --fs-lg:1.125rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.75rem; --tracking-label:.12em; --tracking-eyebrow:.2em; --tracking-display:-.01em; /* serifa em corpo grande fecha, não abre */ /* ---------- ESPAÇAMENTO (base rem) ---------- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; /* ---------- RAIO ---------- */ --r-sm:.25rem; --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-pill:9999px; --container:1180px; /* ---------- MOVIMENTO ---------- */ --duration-fast:100ms; --duration-normal:200ms; --duration-slow:300ms; --easing-smooth:cubic-bezier(.4,0,.2,1); --easing-bounce:cubic-bezier(.34,1.56,.64,1); } /* ===================== TEMA CLARO ===================== */ html.light{ --bg:#FFFFFF; --txt:#291805; --txt-2:#6E5B44; --surface-1:#F8F5F0; --surface-2:#FFFFFF; --surface-3:#EFE8DC; --surface-warm:#F5F1EA; --border:rgba(41,24,5,.13); --border-strong:rgba(41,24,5,.25); --accent-text:#6B4A26; --ok-text:#176B3A; --no-text:#C1333A; --focus-ring:var(--bronze); --focus-halo:rgba(128,92,51,.28); --border-input:rgba(41,24,5,.55); --action-bg:var(--terra); --action-bg-hover:#654322; --on-action:#FFFFFF; --action-2-bg:var(--raiz); --action-2-bg-hover:var(--campo); --accent-solid:var(--terra); --on-accent:#FFFFFF; --accent-soft:rgba(84,55,22,.07); --accent-soft-border:rgba(84,55,22,.30); --accent-ring:rgba(84,55,22,.18); --warn-text:#7A5A00; --star:#7A5500; --txt-placeholder:var(--ink-500); --glow:radial-gradient(120% 90% at 50% 130%, rgba(128,92,51,.10), transparent 70%); --shadow-sm:0 1px 2px rgba(41,24,5,.06); --shadow-md:0 2px 12px -3px rgba(41,24,5,.12); --shadow-lg:0 14px 32px -10px rgba(41,24,5,.20); --shadow-brand:var(--shadow-md); }