/* ========================================================================= MeAuren — tokens do sistema visual (redesign 2026-09-19) Direção: plataforma de jogo escura e cinematográfica. Grafite neutro em camadas de luz; âmbar só na ação principal e no item ativo; vermelho é dano e perigo; ciano é o que o sistema aplicou e é magia; latão é experiência. Os nomes antigos (--night, --surf, --amber...) continuam sendo os tokens: o app inteiro já fala essa língua. Os novos (--sys, escala de texto, espaços, camadas) completam o que faltava. ========================================================================= */ /* ---------- fontes (hospedadas no projeto: abrem até em file://) ---------- Archivo é uma fonte variável com eixo de largura. A família "MeAuren Display" trava a largura em 125% (expandida) e o peso entre 600 e 900: qualquer título que peça var(--fd) sai largo e pesado sem precisar de font-stretch em cada regra. "MeAuren Texto" é a mesma fonte, na largura normal, para a interface. */ @font-face{font-family:"MeAuren Display";src:url("../fontes/archivo-var-latin.woff2") format("woff2");font-weight:600 900;font-stretch:125%;font-style:normal;font-display:swap;} @font-face{font-family:"MeAuren Texto";src:url("../fontes/archivo-var-latin.woff2") format("woff2");font-weight:300 800;font-stretch:100%;font-style:normal;font-display:swap;} @font-face{font-family:"MeAuren Narrativa";src:url("../fontes/spectral-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"MeAuren Narrativa";src:url("../fontes/spectral-500-latin.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;} @font-face{font-family:"MeAuren Narrativa";src:url("../fontes/spectral-400i-latin.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;} @font-face{font-family:"MeAuren Numeros";src:url("../fontes/jetbrainsmono-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;} :root{ color-scheme:dark; /* ---- chão e superfícies: a separação é por luz, não por borda ---- */ --night:#0C0D10; /* chão da página */ --surf:#14161A; /* superfície 1: painéis */ --surf-2:#1B1E23; /* superfície 2: controles, cards dentro de painel */ --surf-3:#262A31; /* superfície 3: hover, trilhos, chips */ --line:rgba(237,235,231,.09); --line-2:rgba(237,235,231,.18); /* ---- texto: marfim frio, nunca branco puro ---- */ --ink:#EAEBEE; --ink-2:#BFC2C8; --mut:#A0A5AD; --mut-2:#8F949D; /* ---- âmbar: só ação principal e item ativo ---- */ --amber:#E0A43E; --amber-2:#EDB757; --amber-soft:#2A2216; /* ---- estados de jogo ---- */ --hp:#F0676A; /* vida, dano, perigo */ --mp:#4CC4D1; /* mana, recurso mágico */ --xp:#CDB883; /* experiência: latão */ --sys:#4CC4D1; /* o que o sistema aplicou (efeito, rolagem, cânone) */ --sys-soft:#10272A; --good:#62C084; --warn:#DDA64F; --bad:#F0676A; --good-bg:#132319; --warn-bg:#2A2114; --bad-bg:#2D1718; /* ---- profundidade: sombra com deslocamento e desfoque, nunca halo ---- */ --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 8px 24px rgba(0,0,0,.34); --shadow-lg:0 28px 70px rgba(0,0,0,.58); --shadow-deep:0 16px 40px rgba(0,0,0,.46); --glow-amber:0 0 0 1px rgba(224,164,62,.5); /* nome antigo; hoje é um anel, não brilho */ /* ---- atmosfera sobre imagem ---- */ --scrim-bottom:linear-gradient(to top,var(--night) 0%,rgba(12,13,16,.8) 34%,rgba(12,13,16,0) 78%); --scrim-left:linear-gradient(to right,var(--night) 0%,rgba(12,13,16,.72) 38%,rgba(12,13,16,0) 78%); --vignette:radial-gradient(120% 90% at 50% 30%,rgba(12,13,16,0) 35%,rgba(12,13,16,.85) 100%); /* ---- famílias ---- */ --fd:"MeAuren Display","Archivo",system-ui,sans-serif; --fb:"MeAuren Texto","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --fe:"MeAuren Narrativa","Spectral",Georgia,serif; --fm:"MeAuren Numeros","JetBrains Mono",ui-monospace,monospace; /* ---- escala de texto (px porque a interface é densa e previsível) ---- */ --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px; --t-lg:20px; --t-xl:26px; --t-2xl:34px; --t-3xl:48px; --t-hero:clamp(40px,5.6vw,84px); /* ---- espaço: base 4 ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px; --s12:128px; /* ---- forma ---- */ --r:6px; --r-lg:10px; --r-xl:16px; /* ---- movimento ---- */ --ease:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --dur-micro:140ms; --dur-comp:260ms; --dur-scene:700ms; /* ---- estrutura do app ---- */ --rail-w:232px; --topbar-h:56px; --bottomnav-h:62px; /* ---- ícones desenhados para uso em CSS (mesmo traço dos ) ---- */ --ico-chevron:url("data:image/svg+xml;utf8,"); --ico-check:url("data:image/svg+xml;utf8,"); --ico-canone:url("data:image/svg+xml;utf8,"); /* ---- camadas ---- */ --z-nav:40; --z-sheet:80; --z-modal:100; --z-toast:120; } /* Claro: cinzas neutros de papel moderno, não pergaminho. */ :root[data-theme="claro"]{ color-scheme:light; --night:#F4F3F0; --surf:#FFFFFF; --surf-2:#ECEBE7; --surf-3:#E1DFDA; --line:rgba(26,28,32,.10); --line-2:rgba(26,28,32,.19); --ink:#1A1C20; --ink-2:#3B4048; --mut:#555A63; --mut-2:#5B6069; --amber:#9A5B0C; --amber-2:#B86E10; --amber-soft:#F6E9D2; --hp:#C0322E; --mp:#006B78; --xp:#7A6431; --sys:#006B78; --sys-soft:#DCEFF1; --good:#2F7A4A; --warn:#8C5D0B; --bad:#B0302C; --good-bg:#E3F0E7; --warn-bg:#F6ECD9; --bad-bg:#F7E1E0; --shadow:0 1px 2px rgba(20,20,24,.06),0 6px 18px rgba(20,20,24,.07); --shadow-lg:0 24px 60px rgba(20,20,24,.16); --shadow-deep:0 14px 40px rgba(20,20,24,.12); --glow-amber:0 0 0 1px rgba(154,91,12,.45); --scrim-bottom:linear-gradient(to top,var(--night) 0%,rgba(244,243,240,.84) 34%,rgba(244,243,240,0) 78%); --scrim-left:linear-gradient(to right,var(--night) 0%,rgba(244,243,240,.7) 40%,rgba(244,243,240,0) 80%); --vignette:radial-gradient(120% 90% at 50% 30%,rgba(26,28,32,0) 30%,rgba(26,28,32,.12) 100%); } /* Azul e Musgo mudam o CHÃO e a temperatura do texto, nunca o acento: âmbar é sempre a ação principal e o efeito do sistema tem a sua cor — se um virasse o outro, a interface passaria a dizer duas coisas com a mesma cor. Cada tema redefine também linhas, textos secundários e as névoas sobre imagem: um chão azul com névoa grafite deixava faixas cinzentas nas capas. ("escuro" era o nome antigo da segunda opção; quem tinha ele salvo cai no Azul.) */ :root[data-theme="azul"],:root[data-theme="escuro"]{ --night:#0A0E16; --surf:#0F1522; --surf-2:#151D2E; --surf-3:#1E293F; --line:rgba(206,221,245,.09); --line-2:rgba(206,221,245,.19); --ink:#E7ECF4; --ink-2:#BCC6D6; --mut:#9DA9BC; --mut-2:#8E9AAF; --amber-soft:#2A2319; --mp:#5DCBE6; --sys:#5DCBE6; --sys-soft:#0E2533; --good-bg:#10231C; --warn-bg:#29210F; --bad-bg:#2B1620; --shadow:0 1px 0 rgba(206,221,245,.04) inset,0 8px 24px rgba(2,5,12,.42); --shadow-lg:0 28px 70px rgba(2,5,12,.64); --shadow-deep:0 16px 40px rgba(2,5,12,.52); --scrim-bottom:linear-gradient(to top,var(--night) 0%,rgba(10,14,22,.8) 34%,rgba(10,14,22,0) 78%); --scrim-left:linear-gradient(to right,var(--night) 0%,rgba(10,14,22,.72) 38%,rgba(10,14,22,0) 78%); --vignette:radial-gradient(120% 90% at 50% 30%,rgba(10,14,22,0) 35%,rgba(10,14,22,.86) 100%); } :root[data-theme="verde"]{ --night:#0A0F0C; --surf:#111713; --surf-2:#171F19; --surf-3:#212C23; --line:rgba(231,237,232,.09); --line-2:rgba(231,237,232,.17); --ink:#E8ECE8; --ink-2:#BDC6BF; --mut:#9DA79F; --mut-2:#8E9990; --mp:#5BC9A8; --sys:#5BC9A8; --sys-soft:#0F2620; --good-bg:#12241A; --scrim-bottom:linear-gradient(to top,var(--night) 0%,rgba(10,15,12,.8) 34%,rgba(10,15,12,0) 78%); --scrim-left:linear-gradient(to right,var(--night) 0%,rgba(10,15,12,.72) 38%,rgba(10,15,12,0) 78%); --vignette:radial-gradient(120% 90% at 50% 30%,rgba(10,15,12,0) 35%,rgba(10,15,12,.85) 100%); } /* ILHAS ESCURAS. Bloco que mora sobre fotografia noturna (o topo e as capas da apresentação, a sessão de exemplo, o "Continuar" do Início) continua escuro em qualquer tema: no Claro, o texto escuro do tema caía sobre a foto escura e sumia. A paleta abaixo é a do :root — mantenha as duas iguais. */ :root[data-theme="claro"] :is(#landing .lhero,#landing .lhead:not(.solido),#landing .demo,#landing .capa,#landing .lmesa,#landing .lfinal,.hero-onb,.continuar:not(.sem-arte)){ color-scheme:dark; --night:#0C0D10; --surf:#14161A; --surf-2:#1B1E23; --surf-3:#262A31; --line:rgba(237,235,231,.09); --line-2:rgba(237,235,231,.18); --ink:#EAEBEE; --ink-2:#BFC2C8; --mut:#A0A5AD; --mut-2:#8F949D; --amber:#E0A43E; --amber-2:#EDB757; --amber-soft:#2A2216; --hp:#F0676A; --mp:#4CC4D1; --xp:#CDB883; --sys:#4CC4D1; --sys-soft:#10272A; --good:#62C084; --warn:#DDA64F; --bad:#F0676A; --good-bg:#132319; --warn-bg:#2A2114; --bad-bg:#2D1718; --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 8px 24px rgba(0,0,0,.34); --glow-amber:0 0 0 1px rgba(224,164,62,.5); --scrim-bottom:linear-gradient(to top,#0C0D10 0%,rgba(12,13,16,.8) 34%,rgba(12,13,16,0) 78%); --scrim-left:linear-gradient(to right,#0C0D10 0%,rgba(12,13,16,.72) 38%,rgba(12,13,16,0) 78%); --vignette:radial-gradient(120% 90% at 50% 30%,rgba(12,13,16,0) 35%,rgba(12,13,16,.85) 100%); color:var(--ink); } @media (prefers-reduced-motion:reduce){:root{--dur-micro:1ms;--dur-comp:1ms;--dur-scene:1ms;}}