/* ==========================================================================
PRISMA · tokens/tema-atelie.css — TEMA "ATELIÊ" (20/09/2026)
Ateliê de Produtos Educacionais — "Da ideia ao produto vendável".
--------------------------------------------------------------------------
Um TEMA do mesmo sistema, não um sistema novo. Carregue DEPOIS de tokens.css:
PEDIDO DA AUTORA (20/09/2026): "muito parecido com o Orbit, só ajusta a cor, que não
gostei desse verde meio acinzentado" · "pode usar laranja e preto, cinza escuro,
dourado, o que ficar bom".
A COR, EM UMA FRASE. Papel neutro levemente quente no chão; grafite-para-preto nos
painéis; LARANJA é a cor de ação; OURO é o destaque raro (segunda frase dos títulos
sobre escuro, arestas, progresso). Sem verde-sálvia, rosa, violeta, magenta ou neon.
AS MESMAS TRÊS CAMADAS
1. primitivos novos ........ --p-grafite-*, --p-papel-*, --p-ouro-*, três laranjas
2. contrato semântico ...... inteiro, religado (lista de conferência: prisma-light)
3. temas ................... [data-tema="atelie"] claro — o chão do produto
[data-tema="atelie-grafite"] escuro — escopo para peça
que flutua sobre qualquer chão (barra, diálogo)
POR QUE O TEMA É CLARO. A composição de referência (Orbit) é uma página clara com
painéis escuros de cantos grandes. Os painéis escuros são a .cena do sistema, que
já religa texto e vidro para "sobre destaque". O par escuro existe para o que NÃO
mora dentro de uma cena: a barra fixa e o diálogo.
CONTRASTE — medido (scratchpad/atelie/contraste.py; números em docs/atelie/LEIA-ME.md):
laranja vivo NÃO segura texto branco pequeno (2,8:1). A decisão do tema é TINTA
ESCURA SOBRE LARANJA VIVO: --text-on-accent é grafite, não branco.
========================================================================== */
/* ==========================================================================
1. PRIMITIVOS
========================================================================== */
:root {
/* --- Grafite: o neutro escuro da casa. Quente o bastante para não azular,
neutro o bastante para não virar marrom. ---------------------------- */
--p-grafite-1000: #0B0A09;
--p-grafite-975: #121110;
--p-grafite-950: #181716;
--p-grafite-900: #1F1E1C;
--p-grafite-850: #262523;
--p-grafite-800: #2E2C2A;
--p-grafite-750: #383633;
--p-grafite-700: #43413D;
--p-grafite-600: #57544F;
--p-grafite-500: #66625C;
--p-grafite-400: #8E8A83;
--p-grafite-300: #B3AFA8;
--p-grafite-200: #D2CEC7;
--p-grafite-100: #E6E3DD;
/* --- Papel: claro NEUTRO levemente quente. R−B ≤ 8: nunca creme amarelado,
nunca esverdeado. -------------------------------------------------- */
--p-papel-0: #FFFFFF;
--p-papel-50: #FBFAF8;
--p-papel-100: #F3F1EE;
--p-papel-200: #ECEAE6;
--p-papel-300: #E3E0DB;
/* --- Ouro: destaque raro. 300–400 sobre grafite; 700 sobre papel. -------- */
--p-ouro-100: #F6ECD2;
--p-ouro-200: #F0DDAA;
--p-ouro-300: #E8CB85;
--p-ouro-400: #D9B25A;
--p-ouro-500: #C4983C;
--p-ouro-600: #A37A24;
--p-ouro-700: #7A5A12;
--p-ouro-800: #4A370E;
/* --- Laranja: a escala já existe em tokens.css (--p-laranja-*). Só o que
faltava: o degrau pressionado que ainda segura tinta escura, o laranja
de TEXTO sobre papel e a superfície clara de aviso. ------------------ */
--p-laranja-650: #DC4F0A;
--p-laranja-750: #A93608;
--p-laranja-100: #FFEAD6;
/* --- Vermelho sobre papel (o 500 de tokens.css é para fundo escuro) ------ */
--p-vermelho-700: #B4322B;
--p-vermelho-100: #FBE9E7;
}
/* ==========================================================================
2 + 3. CONTRATO SEMÂNTICO — tema CLARO (o chão do Ateliê)
========================================================================== */
[data-tema="atelie"] {
color-scheme: light;
/* --- Fundo ------------------------------------------------------------- */
--background-deep: var(--p-papel-300);
--background-canvas: var(--p-papel-100);
--background-subtle: var(--p-papel-0);
/* --- Superfícies sólidas ------------------------------------------------ */
--surface-1: var(--p-papel-0);
--surface-2: var(--p-papel-50);
--surface-3: var(--p-papel-200);
--surface-elevated: var(--p-papel-0);
--surface-selected: rgba(249, 115, 22, 0.10);
/* a placa recebe luz de cima e esquenta um fio para baixo — nunca amarela */
--surface-veu:
linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(236,234,230,.55) 100%);
--surface-destaque:
linear-gradient(158deg, var(--p-grafite-800) 0%, var(--p-grafite-900) 55%, var(--p-grafite-975) 100%);
--campo-atmosfera:
radial-gradient(58rem 40rem at 82% -10%, rgba(249, 115, 22, 0.10), transparent 60%),
radial-gradient(46rem 34rem at 2% 102%, rgba(217, 178, 90, 0.12), transparent 58%),
linear-gradient(175deg, var(--p-papel-50) 0%, var(--p-papel-200) 100%);
/* --- Vidro -------------------------------------------------------------- */
--glass-tint-clear: rgba(255, 255, 255, 0.42);
--glass-tint-liquid: rgba(255, 255, 255, 0.58);
--glass-tint-frosted: rgba(255, 255, 255, 0.78);
--glass-blur-clear: 14px;
--glass-blur-liquid: 24px;
--glass-blur-frosted: 36px;
--glass-saturacao: 140%;
--surface-glass: var(--glass-tint-liquid);
--surface-glass-strong: var(--glass-tint-frosted);
--glass-blur: var(--glass-blur-liquid);
--glass-blur-strong: var(--glass-blur-frosted);
/* --- Texto — medido sobre --background-canvas ---------------------------- */
--text-primary: var(--p-grafite-975);
--text-secondary: var(--p-grafite-700);
--text-muted: var(--p-grafite-500);
--text-disabled: #A39F98; /* desligado de propósito (a WCAG dispensa) */
--text-inverse: var(--p-papel-0);
--text-on-accent: var(--p-grafite-975); /* TINTA ESCURA sobre laranja vivo */
/* --- Bordas: no claro a borda é tinta grafite em alfa --------------------- */
--border-subtle: rgba(18, 17, 16, 0.07);
--border-default: rgba(18, 17, 16, 0.12);
--border-strong: rgba(18, 17, 16, 0.24);
--border-glass: rgba(255, 255, 255, 0.85);
--border-focus: var(--p-laranja-750);
/* --- Marca e acentos ------------------------------------------------------
Os NOMES do contrato são herança do PRISMA (blue/cyan/green). Aqui:
brand-blue → a cor principal da marca ..... laranja
brand-cyan → a segunda ................... ouro
brand-green → o apoio neutro ............... grafite médio
brand-orange → o calor ...................... laranja vivo */
--brand-blue: var(--p-laranja-500);
--brand-cyan: var(--p-ouro-400);
--brand-green: var(--p-grafite-400);
--brand-orange: var(--p-laranja-500);
--accent-primary: var(--p-laranja-500);
--accent-hover: var(--p-laranja-600);
--accent-active: var(--p-laranja-650);
--accent-muted: rgba(249, 115, 22, 0.12);
--accent-text: var(--p-laranja-750); /* laranja que LÊ sobre papel */
--accent-cyan: var(--p-ouro-700);
--accent-green: var(--p-grafite-600);
--accent-warm: var(--p-ouro-700); /* ouro que lê sobre papel */
--accent-cyan-muted: rgba(217, 178, 90, 0.16);
--accent-green-muted: rgba(18, 17, 16, 0.06);
--accent-warm-muted: rgba(217, 178, 90, 0.16);
/* --- Feedback. "Deu certo" no Ateliê é OURO (selo), não verde. -------------- */
--success: var(--p-ouro-700); --success-surface: var(--p-ouro-100);
--warning: var(--p-laranja-750); --warning-surface: var(--p-laranja-100);
--danger: var(--p-vermelho-700); --danger-surface: var(--p-vermelho-100);
--info: var(--p-grafite-700); --info-surface: var(--p-papel-200);
/* --- Glow ------------------------------------------------------------------ */
--glow-subtle: 0 0 0 1px rgba(249,115,22,.10), 0 4px 20px rgba(249,115,22,.10);
--glow-active: 0 0 0 1px rgba(249,115,22,.30), 0 6px 26px rgba(249,115,22,.16);
--glow-focus: 0 0 0 2px var(--background-canvas), 0 0 0 4px var(--p-laranja-750);
--glow-processing: 0 0 0 1px rgba(217,178,90,.42), 0 0 24px rgba(249,115,22,.18);
/* --- Elevação: sombra grafite, macia ------------------------------------------ */
--elev-flat: none;
--elev-raised: 0 1px 2px rgba(18,17,16,.07);
--elev-floating: 0 10px 28px -6px rgba(18,17,16,.12);
--elev-overlay: 0 16px 48px rgba(18,17,16,.16);
--elev-modal: 0 32px 80px rgba(18,17,16,.24);
}
/* ==========================================================================
TEMA ESCURO — Ateliê Grafite
Escopo para a peça que flutua sobre QUALQUER chão e não mora dentro de uma
.cena: barra fixa, navegação do celular, diálogo. Também é o modo escuro do
produto, se um dia ele existir. Use num elemento: data-tema="atelie-grafite".
========================================================================== */
[data-tema="atelie-grafite"] {
color-scheme: dark;
--background-deep: var(--p-grafite-1000);
--background-canvas: var(--p-grafite-975);
--background-subtle: var(--p-grafite-950);
--surface-1: var(--p-grafite-900);
--surface-2: var(--p-grafite-850);
--surface-3: var(--p-grafite-800);
--surface-elevated: var(--p-grafite-750);
--surface-selected: rgba(249, 115, 22, 0.16);
--surface-veu:
linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);
--surface-destaque:
linear-gradient(158deg, var(--p-grafite-800) 0%, var(--p-grafite-900) 55%, var(--p-grafite-975) 100%);
--campo-atmosfera:
radial-gradient(62rem 42rem at 80% -10%, rgba(249, 115, 22, 0.16), transparent 60%),
radial-gradient(50rem 36rem at 4% 102%, rgba(217, 178, 90, 0.10), transparent 60%),
linear-gradient(175deg, var(--p-grafite-950), var(--p-grafite-975) 62%, var(--p-grafite-1000));
/* a barra passa a maior parte do tempo sobre PAPEL: com a tinta de 0,76 do PRISMA
o vidro clareava até o texto secundário cair de 4,5:1. Aqui o frosted é 0,88. */
--glass-tint-clear: rgba(24, 23, 22, 0.42);
--glass-tint-liquid: rgba(24, 23, 22, 0.64);
--glass-tint-frosted: rgba(24, 23, 22, 0.88);
--glass-blur-clear: 14px;
--glass-blur-liquid: 24px;
--glass-blur-frosted: 36px;
--glass-saturacao: 140%;
--surface-glass: var(--glass-tint-liquid);
--surface-glass-strong: var(--glass-tint-frosted);
--glass-blur: var(--glass-blur-liquid);
--glass-blur-strong: var(--glass-blur-frosted);
--text-primary: var(--p-papel-100);
--text-secondary: var(--p-grafite-300);
--text-muted: var(--p-grafite-400);
--text-disabled: var(--p-grafite-600);
--text-inverse: var(--p-grafite-975);
--text-on-accent: var(--p-grafite-975);
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.18);
--border-glass: rgba(255, 255, 255, 0.22);
--brand-blue: var(--p-laranja-500);
--brand-cyan: var(--p-ouro-400);
--brand-green: var(--p-grafite-400);
--brand-orange: var(--p-laranja-500);
--accent-primary: var(--p-laranja-500);
--accent-hover: var(--p-laranja-600);
--accent-active: var(--p-laranja-650);
--glow-subtle: 0 0 0 1px rgba(249,115,22,.12), 0 8px 32px rgba(249,115,22,.08);
--glow-active: 0 0 0 1px rgba(249,115,22,.34), 0 8px 36px rgba(249,115,22,.18);
--glow-focus: 0 0 0 2px var(--background-canvas), 0 0 0 4px var(--p-laranja-300);
--glow-processing: 0 0 0 1px rgba(217,178,90,.34), 0 0 30px rgba(249,115,22,.18);
--elev-flat: none;
--elev-raised: 0 1px 2px rgba(0,0,0,.40);
--elev-floating: 0 8px 24px rgba(0,0,0,.42);
--elev-overlay: 0 16px 48px rgba(0,0,0,.55);
--elev-modal: 0 32px 80px rgba(0,0,0,.65);
}
/* --------------------------------------------------------------------------
ACENTOS SOBRE CHÃO ESCURO
A .cena do sistema religa texto, vidro e borda para "sobre destaque" — mas não os
ACENTOS. Num tema claro, --accent-text é um laranja escuro (lê sobre papel) e
sumiria dentro de um painel grafite. Este bloco dá aos painéis escuros do tema
claro os mesmos acentos do tema escuro.
-------------------------------------------------------------------------- */
[data-tema="atelie-grafite"],
[data-tema="atelie"] .cena,
[data-tema="atelie"] .superficie--destaque {
--accent-muted: rgba(249, 115, 22, 0.18);
--accent-text: var(--p-laranja-400);
--accent-cyan: var(--p-ouro-300);
--accent-green: var(--p-grafite-300);
--accent-warm: var(--p-ouro-300); /* o ouro dos títulos sobre grafite */
--accent-cyan-muted: rgba(217, 178, 90, 0.14);
--accent-green-muted: rgba(255, 255, 255, 0.08);
--accent-warm-muted: rgba(217, 178, 90, 0.14);
--border-focus: var(--p-laranja-300);
--success: var(--p-ouro-300); --success-surface: var(--p-ouro-800);
--warning: var(--p-laranja-400); --warning-surface: var(--p-laranja-900);
--danger: var(--p-vermelho-500); --danger-surface: var(--p-vermelho-800);
--info: var(--p-grafite-200); --info-surface: rgba(255, 255, 255, 0.08);
}
/* --------------------------------------------------------------------------
TEXTO PEQUENO SOBRE A CENA ACESA — a causa-raiz do parecer de 20/09/2026
Os dois tons translúcidos (-2 a 0,72 e -3 a 0,58) foram validados contra o CHÃO
PLANO do painel de destaque (8,9:1 e 6,3:1) e reprovam sobre a CENA, que é o que a
página de fato desenha: o céu clareia e some por baixo do texto. Medido antes:
"Etapa Estrutura · 40%" ......... 1,26:1 (100% da área abaixo de 4,5)
"Suas linhas de produto" ........ 1,47:1 (100% da área)
"Fábrica interna" ............... 3,31:1 · "Linha escolhida" 3,43:1
A Conecta já tinha aprendido isto medindo e passou a usar o tom CHEIO nos textos
pequenos sobre cena. Aqui a regra sobe para o tema, em vez de virar caça a valores
soltos: DENTRO DA CENA o texto usa --text-on-destaque cheio, e a hierarquia fica por
tamanho, caixa alta e peso — nunca por opacidade. Fora da cena (a capa do produto, um
painel de destaque plano) os dois tons continuam valendo: lá eles medem e passam.
--text-disabled é redeclarado porque cena.css o aponta para o -3: desligado precisa
continuar parecendo desligado (o enviar do composer nasce desabilitado).
-------------------------------------------------------------------------- */
[data-tema="atelie"] .cena,
[data-tema="atelie-grafite"] .cena {
--text-on-destaque-2: var(--text-on-destaque);
--text-on-destaque-3: var(--text-on-destaque);
--text-disabled: color-mix(in srgb, var(--text-on-destaque) 42%, transparent);
}
/* ==========================================================================
O QUE NO PRISMA "NÃO MUDA COM O TEMA" — e aqui muda, porque era azul
Painel de destaque, registro óptico, papel e tinta, cena, folha, estados.
O seletor repete os dois temas de propósito: var() dentro de token é resolvido
no elemento onde o token é DECLARADO (nota de tokens.css, D-021).
========================================================================== */
[data-tema="atelie"],
[data-tema="atelie-grafite"] {
/* --- painel de destaque ------------------------------------------------------ */
--surface-destaque-base: var(--p-grafite-950);
--border-focus-sobre-imagem: var(--p-papel-0);
--text-on-destaque: #F6F3EE;
--text-on-destaque-2: rgba(246, 243, 238, 0.72);
--text-on-destaque-3: rgba(246, 243, 238, 0.58);
--border-on-destaque: rgba(255, 255, 255, 0.10);
--glass-on-destaque: rgba(255, 255, 255, 0.10);
--glass-on-destaque-hover: rgba(255, 255, 255, 0.16);
/* --- registro óptico ---------------------------------------------------------- */
--optico-texto: #FAF8F5;
--optico-solido: var(--p-grafite-975);
--optico-campo:
radial-gradient(44% 46% at 100% 62%, rgba(249,115,22,.30), transparent 72%),
linear-gradient(204deg, var(--p-grafite-600) 0%, var(--p-grafite-750) 38%, var(--p-grafite-900) 70%, var(--p-grafite-975) 100%);
--optico-faixa: linear-gradient(100deg, rgba(18,17,16,.92) 0%, rgba(46,44,42,.88) 46%, rgba(87,84,79,.78) 100%);
--optico-faixa-secundaria: linear-gradient(100deg, rgba(11,10,9,.90) 0%, rgba(31,30,28,.90) 50%, rgba(56,54,51,.82) 100%);
--optico-halo: inset 0 1px 0 rgba(246,236,210,.50), 0 -1px 0 rgba(217,178,90,.46), 0 -10px 28px -6px rgba(249,115,22,.24);
--optico-vidro: linear-gradient(140deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
--optico-borda: rgba(255,255,255,.14);
--optico-aresta: rgba(255,255,255,.30);
--optico-reflexo: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%, rgba(217,178,90,.12));
--optico-elevacao: 0 26px 64px -24px rgba(0,0,0,.62), 0 0 40px rgba(249,115,22,.07);
--optico-controle: rgba(24,23,22,.52);
/* --- papel e tinta --------------------------------------------------------------- */
--papel: var(--text-on-destaque);
--tinta: var(--optico-solido);
/* --- céu da cena ------------------------------------------------------------------
BRASA DE FORNO, NÃO PÔR DO SOL (revisto em 20/09/2026, depois da medição).
O que havia antes: a rampa quente do linear ocupava os primeiros 30% do eixo e
atravessava a borda de cima inteira — 26,7% da dobra de abertura em laranja/âmbar
saturado e 12,6% em brasa forte, contra 0,0% e 0,0% da Conecta. O canto superior
direito, que é onde a barra flutuante mora, virava papel-ouro (#ECC27A): o botão
principal, laranja, não se separava dele (2,85:1, abaixo do piso de 3:1).
O que passa a valer:
1. o LINEAR é só grafite — ele é o ar da cena, não a luz;
2. a luz quente vem de UM ponto, com direção, num RADIAL, e mora longe do alto
à direita: o chão da barra volta a ser grafite;
3. cada uma das três cenas recebe a luz de um lado diferente — o mesmo gesto de
aerógrafo repetido quatro vezes era o que fazia a página parecer um cartão.
Continua MEIO-TOM, não noite: vidro precisa do que refratar. */
/* abertura — a boca do forno à direita, na altura do peito; o alto respira grafite */
--cena-ceu:
radial-gradient(36% 44% at 101% 58%, color-mix(in srgb, var(--p-laranja-500) 44%, transparent), transparent 72%),
radial-gradient(24% 26% at 93% 40%, color-mix(in srgb, var(--p-ouro-300) 22%, transparent), transparent 74%),
linear-gradient(204deg,
var(--p-grafite-750) 0%,
var(--p-grafite-850) 34%,
var(--p-grafite-900) 72%,
var(--p-grafite-950) 100%);
/* funda — luz rasante, baixa, vinda do canto inferior direito: gesto deitado */
--cena-ceu-fundo:
radial-gradient(44% 34% at 96% 104%, color-mix(in srgb, var(--p-laranja-600) 38%, transparent), transparent 76%),
linear-gradient(200deg,
var(--p-grafite-800) 0%,
var(--p-grafite-900) 44%,
var(--p-grafite-950) 100%);
/* calma — o fecho: a brasa é um foco pequeno, fora do eixo, no pé à direita */
--cena-ceu-calmo:
radial-gradient(34% 40% at 84% 112%, color-mix(in srgb, var(--p-laranja-500) 42%, transparent), transparent 70%),
linear-gradient(180deg,
var(--p-grafite-975) 0%,
var(--p-grafite-900) 48%,
var(--p-grafite-850) 100%);
/* --- folha: papel quase branco com um sopro quente embaixo — nunca creme ------------ */
--folha-fundo: linear-gradient(168deg, var(--p-papel-0) 0%, var(--p-papel-50) 46%, var(--p-papel-200) 100%);
/* --- estados de um produto — a palavra da faixa é TINTA ESCURA (--text-on-accent);
por isso as quatro cores são claras-médias. Medidas no LEIA-ME. ---------------- */
--estado-continuar: var(--p-ouro-400);
--estado-ajustar: var(--p-grafite-200);
--estado-decidir: var(--p-laranja-500);
--estado-finalizado: var(--p-grafite-400);
--text-on-estado: var(--text-on-accent);
}
/* --------------------------------------------------------------------------
AS LÂMINAS DA CENA, EM GRAFITE
foundations/cena.css pinta as lâminas com os tokens de ACENTO (no PRISMA, azul sobre
azul). No Ateliê o acento é laranja — lâmina laranja seria pôr do sol de cartão-postal.
O campo de luz (.cena-luz) é decorativo, aria-hidden, e só contém as lâminas: religar os
tokens AQUI muda a matéria da lâmina sem tocar em nenhum botão da página.
corpo da lâmina da frente ... grafite em meio-tom (lê --accent-active)
brasa junto à aresta ........ laranja queimado (lê --accent-hover)
lâmina de trás, translúcida . brasa (lê --accent-primary)
fio da aresta e reflexo ..... ouro (lê --brand-blue / --brand-orange)
Quando cena.css for revisto, o certo é ele ler tokens próprios (--cena-lamina-*).
-------------------------------------------------------------------------- */
[data-tema="atelie"] .cena-luz,
[data-tema="atelie-grafite"] .cena-luz {
--accent-active: var(--p-grafite-500);
--accent-hover: var(--p-laranja-800);
--accent-primary: var(--p-laranja-800);
--brand-blue: var(--p-ouro-400);
--brand-orange: var(--p-ouro-300);
}
/* ==========================================================================
D-025 · Ateliê · Quiet Luxury Technology Editorial · premium pass 20/09/2026
--------------------------------------------------------------------------
Champagne/bronze vira assinatura; laranja fica como brasa rara.
========================================================================== */
[data-tema="atelie"]{
--background-deep:#E4E0D8;
--background-canvas:#F1EFEA;
--background-subtle:#FBFAF7;
--surface-1:#FBFAF7;
--surface-2:#F6F3ED;
--surface-3:#ECE8E0;
--surface-elevated:#FFFFFF;
--surface-selected:rgba(182,141,71,.11);
--surface-veu:linear-gradient(158deg,rgba(255,255,255,.88),rgba(232,228,220,.52));
--surface-destaque:linear-gradient(158deg,#252421 0%,#191918 55%,#111211 100%);
--campo-atmosfera:
radial-gradient(54rem 34rem at 88% -8%,rgba(201,170,104,.10),transparent 62%),
radial-gradient(38rem 28rem at 3% 100%,rgba(215,107,50,.055),transparent 66%),
linear-gradient(175deg,#F7F4EE,#ECE8E0 100%);
--text-primary:#181816;
--text-secondary:#55524C;
--text-muted:#77736B;
--text-on-accent:#17140E;
--border-subtle:rgba(24,24,22,.065);
--border-default:rgba(24,24,22,.105);
--border-strong:rgba(117,88,40,.24);
--border-glass:rgba(255,255,255,.84);
--border-focus:#9C7437;
--brand-blue:#B68D47;
--brand-cyan:#D9C18B;
--brand-green:#6E6961;
--brand-orange:#D76B32;
--accent-primary:#B68D47;
--accent-hover:#9C7437;
--accent-active:#7A5828;
--accent-muted:rgba(182,141,71,.12);
--accent-text:#7A5828;
--accent-cyan:#9D7A3C;
--accent-green:#6E6961;
--accent-warm:#B75B2D;
--accent-cyan-muted:rgba(201,170,104,.15);
--accent-green-muted:rgba(24,24,22,.055);
--accent-warm-muted:rgba(215,107,50,.08);
--glass-tint-clear:rgba(255,255,255,.34);
--glass-tint-liquid:rgba(255,255,255,.52);
--glass-tint-frosted:rgba(255,255,255,.76);
--glass-saturacao:128%;
--glow-subtle:0 0 0 1px rgba(182,141,71,.08),0 10px 32px rgba(117,88,40,.06);
--glow-active:0 0 0 1px rgba(201,170,104,.22),0 14px 42px rgba(117,88,40,.10);
--glow-focus:0 0 0 2px var(--background-canvas),0 0 0 4px #9C7437;
--glow-processing:0 0 0 1px rgba(201,170,104,.26),0 0 28px rgba(215,107,50,.10);
--elev-raised:0 1px 2px rgba(24,24,22,.045);
--elev-floating:0 18px 46px -18px rgba(24,24,22,.16);
--elev-overlay:0 26px 68px rgba(24,24,22,.18);
--elev-modal:0 38px 96px rgba(24,24,22,.24);
}
[data-tema="atelie-grafite"]{
--background-deep:#090A0A;
--background-canvas:#0F1010;
--background-subtle:#141515;
--surface-1:#171817;
--surface-2:#1E1F1E;
--surface-3:#262624;
--surface-elevated:#2E2D29;
--surface-selected:rgba(201,170,104,.12);
--text-primary:#F1EEE7;
--text-secondary:#C7C1B6;
--text-muted:#918C82;
--text-on-accent:#17140E;
--border-subtle:rgba(241,238,231,.055);
--border-default:rgba(241,238,231,.09);
--border-strong:rgba(226,204,148,.18);
--border-glass:rgba(226,204,148,.20);
--brand-blue:#C9AA68;
--brand-cyan:#E2CC94;
--brand-green:#8F8A80;
--brand-orange:#D76B32;
--accent-primary:#C9AA68;
--accent-hover:#D8BD7E;
--accent-active:#9C7437;
--accent-muted:rgba(201,170,104,.13);
--accent-text:#E2CC94;
--accent-cyan:#E2CC94;
--accent-green:#B8B1A4;
--accent-warm:#D9824C;
--accent-warm-muted:rgba(215,107,50,.10);
--glass-tint-clear:rgba(20,21,20,.34);
--glass-tint-liquid:rgba(18,19,18,.56);
--glass-tint-frosted:rgba(15,16,15,.80);
--glass-saturacao:126%;
--glow-subtle:0 0 0 1px rgba(201,170,104,.07),0 10px 34px rgba(201,170,104,.05);
--glow-active:0 0 0 1px rgba(226,204,148,.20),0 14px 42px rgba(201,170,104,.10);
}
[data-tema="atelie"] .cena,
[data-tema="atelie-grafite"] .cena{
--accent-text:#E2CC94;
--accent-cyan:#E2CC94;
--accent-green:#B8B1A4;
--accent-warm:#D9824C;
--accent-muted:rgba(201,170,104,.12);
--accent-warm-muted:rgba(215,107,50,.08);
--border-focus:#E2CC94;
}
[data-tema="atelie"],
[data-tema="atelie-grafite"]{
--optico-campo:
radial-gradient(32% 38% at 100% 66%,rgba(215,107,50,.14),transparent 74%),
radial-gradient(24% 28% at 82% 34%,rgba(226,204,148,.13),transparent 76%),
linear-gradient(204deg,#4B4A45 0%,#302F2C 38%,#1D1D1B 72%,#111211 100%);
--optico-halo:inset 0 1px 0 rgba(241,238,231,.24),0 -1px 0 rgba(201,170,104,.30),0 -10px 28px -8px rgba(215,107,50,.11);
--cena-ceu:
radial-gradient(31% 38% at 101% 60%,rgba(215,107,50,.15),transparent 74%),
radial-gradient(21% 24% at 91% 38%,rgba(226,204,148,.13),transparent 76%),
linear-gradient(204deg,#4C4B47 0%,#343330 34%,#242321 72%,#171715 100%);
}