/* ══════════════════════════════════════════════════════════════ TEMA DO KALEMA GROWTH OS Decisão da Mari em 21/08/2026: a tela do CLIENTE vai em fundo claro, que realça a marca dele, e a tela interna da KALEMA vai no bege areia da paleta. Como usar: a classe entra na tag . → conta de cliente → por dentro da Kalema (sem classe) → o noite, que era o padrão antigo As cores vêm do tokens.css do design system. O que não estiver lá não entra aqui: cor sem token é como o roxo entrou uma vez. ══════════════════════════════════════════════════════════════ */ :root{ /* ── escala de fundo e superfície ── */ --k-950:#080C16; /* o fundo da página */ --k-900:#0B1622; /* superfície recuada */ --k-800:#111829; /* o card */ --k-700:#16273B; /* card elevado */ --k-600:#1D3350; /* borda de destaque */ /* ── marca ── */ --k-gold:#D4A24E; --k-gold-puro:#D4A24E; --k-gold-light:#F5E39C; --k-gold-deep:#7B6027; --k-gold-texto:#D4A24E; /* o dourado quando é texto: ganha corpo no claro */ /* ── tinta ── */ --k-ink:#F4F1EA; --k-soft:#B3BCCF; --k-mute:#7D879C; /* ── família Mar, que é o estado ── */ --k-mar-100:#A9DED0; --k-mar-300:#4FB0D8; --k-mar-500:#35B39B; --k-mar-900:#12505C; --k-coral:#E2626B; /* ── linhas e véus, no lugar do rgba branco espalhado ── */ --linha:rgba(255,255,255,.09); --linha-forte:rgba(255,255,255,.16); --linha-fraca:rgba(255,255,255,.06); --superf:rgba(255,255,255,.04); --superf-forte:rgba(255,255,255,.07); --sombra:none; /* a tinta que vai SOBRE a cor da marca (avatar, sigla, pilula): escura nos tres temas, porque o fundo ali e a cor do cliente, nao o fundo da pagina */ --k-tinta-fixa:#0B1220; --serif:Georgia,'Iowan Old Style','Times New Roman',serif; --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,sans-serif; --mono:ui-monospace,'Cascadia Mono',Consolas,monospace; --raio:14px; } /* ══ A CONTA DO CLIENTE · claro, para a marca dele aparecer ══ */ .tema-claro{ --k-950:#F6F3EE; /* fundo da página: claro e quente, nunca branco puro */ --k-900:#FFFFFF; --k-800:#FFFFFF; /* o card */ --k-700:#FBF8F3; --k-600:#EFE7DC; --k-gold:#7A5819; /* o mesmo ambar, com corpo para ser lido sobre claro */ --k-gold-puro:#D4A24E; /* o ambar da marca, para traco e preenchimento */ --k-gold-light:#7F5E1C; --k-gold-deep:#5E4718; --k-gold-texto:#87621F; --k-ink:#14202E; --k-soft:#374862; --k-mute:#414D61; --k-mar-100:#1F6F5E; --k-mar-300:#136483; --k-mar-500:#166B5A; --k-mar-900:#0C3A44; --k-coral:#A82A34; --linha:rgba(20,32,46,.13); --linha-forte:rgba(20,32,46,.22); --linha-fraca:rgba(20,32,46,.08); --superf:rgba(20,32,46,.035); --superf-forte:rgba(20,32,46,.06); --sombra:0 1px 2px rgba(20,32,46,.05), 0 8px 24px rgba(20,32,46,.05); } /* ══ POR DENTRO DA KALEMA · o bege areia da paleta ══ */ .tema-areia{ --k-950:#EDE3D9; /* a areia: o fundo claro da Kalema */ --k-900:#F4ECE3; --k-800:#FBF6F0; /* o card */ --k-700:#F7F0E7; --k-600:#E3D6C6; --k-gold:#725112; /* ambar com corpo, para ler sobre a areia */ --k-gold-puro:#D4A24E; --k-gold-light:#87621F; --k-gold-deep:#5E4718; --k-gold-texto:#7E5C1D; --k-ink:#16202C; --k-soft:#374858; --k-mute:#3F4B5B; --k-mar-100:#1F6F5E; --k-mar-300:#136483; --k-mar-500:#166B5A; --k-mar-900:#0C3A44; --k-coral:#A02730; --linha:rgba(22,32,44,.14); --linha-forte:rgba(22,32,44,.24); --linha-fraca:rgba(22,32,44,.08); --superf:rgba(22,32,44,.04); --superf-forte:rgba(22,32,44,.07); --sombra:0 1px 2px rgba(60,45,30,.06), 0 10px 26px rgba(60,45,30,.07); } /* ── o card ganha relevo quando o fundo é claro ── */ html.tema-claro .cnt, html.tema-claro .pes, .tema-claro .tf, .tema-claro .pl, html.tema-areia .cnt, html.tema-areia .pes, .tema-areia .tf, .tema-areia .pl{ box-shadow:var(--sombra); } /* ── Ilhas escuras dentro do tema claro ── A faixa da marca, a pílula com a cor do cliente e a capa colorida continuam escuras de propósito: ali dentro a tinta tem que ser clara, senão o texto do tema some dentro do navy, do roxo ou do azul. Precisa de `html` na frente porque o