/* =========================================================================
   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 <svg>) ---- */
  --ico-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>");
  --ico-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7'/></svg>");
  --ico-canone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='1.6' fill='black'/></svg>");

  /* ---- 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:#3E434B; --mut:#5F646D; --mut-2:#666B74;
  --amber:#9A5B0C; --amber-2:#B86E10; --amber-soft:#F6E9D2;
  --hp:#C0322E; --mp:#007D8C; --xp:#7A6431;
  --sys:#007D8C; --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%);
}
/* Escuro e Verde mudam o CHÃO, nunca o acento: âmbar é sempre a ação principal
   e ciano é sempre o efeito do sistema — se um virasse o outro, a interface
   passaria a dizer duas coisas com a mesma cor. */
:root[data-theme="escuro"]{
  --night:#08090B; --surf:#101216; --surf-2:#161A1F; --surf-3:#20252C;
  --line:rgba(237,235,231,.08); --line-2:rgba(237,235,231,.16);
}
: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);
  --mp:#5BC9A8; --sys:#5BC9A8; --sys-soft:#0F2620;
}

@media (prefers-reduced-motion:reduce){:root{--dur-micro:1ms;--dur-comp:1ms;--dur-scene:1ms;}}