/* assets/css/tokens.css
   Design System Nummus — tokens, tipografia, base e os dois materiais.
   Referência completa: DESIGN-SYSTEM.md na raiz do repositório.

   Ideia central: o vidro (Liquid Glass) é da camada de navegação — menubar,
   barra lateral, folhas, toasts. O conteúdo (números, tabelas, formulários)
   fica num "papel fosco", mais opaco, para a leitura dos dados nunca disputar
   com o fundo. O fundo é neutro (grafite ou porcelana) com luz difusa e
   estática, como as páginas de produto da Apple.

   Paleta: bronze de moeda (nummus = moeda, em latim) e pátina (o verde que o
   bronze ganha com o tempo), sobre grafite à noite e porcelana de dia. */

@font-face{
  font-family:'Inter Nummus';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-wght-4.1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Nummus';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-wght-4.1.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Tema escuro ────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  /* Marca */
  --bronze:#E2B65A;          /* acento: ação principal e seleção */
  --bronze-forte:#C9973A;
  --bronze-texto:#EBC67A;    /* bronze legível como texto */
  --bronze-suave:rgba(226,182,90,.14);
  --bronze-borda:rgba(226,182,90,.34);
  --patina:#4CC2AE;          /* positivo e informativo */
  --patina-suave:rgba(76,194,174,.14);

  /* Fundo e superfícies */
  --fundo:#0E0F12;
  --fundo-2:#15171C;
  --papel:rgba(28,30,36,.82);          /* conteúdo: fosco, quase opaco */
  --papel-2:rgba(38,40,47,.9);        /* conteúdo dentro de conteúdo */
  --papel-hover:rgba(48,51,59,.94);
  --vidro-fundo:rgba(34,36,42,.58);    /* navegação: translúcido */
  --vidro-forte:rgba(28,30,36,.84);
  --vidro-borda:rgba(255,255,255,.12);
  --vidro-brilho:rgba(255,255,255,.14);
  --vidro-sombra-interna:rgba(0,0,0,.35);
  --reflexo:rgba(255,255,255,.09);
  --reflexo-borda:rgba(255,255,255,.40);
  --vidro-blur:26px;

  /* Texto */
  --texto:#F2F4F8;
  --texto-2:#B4BDCB;
  --texto-3:#8D98AB;

  /* Linhas */
  --borda:rgba(255,255,255,.08);
  --borda-forte:rgba(255,255,255,.15);

  /* Semânticas (cores de sistema da Apple, modo escuro) */
  --verde:#30D158;--vermelho:#FF453A;--amarelo:#FFD60A;--laranja:#FF9F0A;--azul:#0A84FF;--roxo:#BF5AF2;--ciano:#64D2FF;
  --verde-suave:rgba(48,209,88,.14);--vermelho-suave:rgba(255,69,58,.14);--amarelo-suave:rgba(255,159,10,.14);--azul-suave:rgba(10,132,255,.15);--roxo-suave:rgba(191,90,242,.14);

  /* Fundo ambiente: luz neutra, sem cor */
  --luz-1:rgba(255,255,255,.045);--luz-2:rgba(160,175,200,.05);

  /* Sombras: uma altura por camada */
  --sombra-papel:0 1px 2px rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.16);
  --sombra-flutuante:0 14px 44px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.28);
  --sombra-folha:0 30px 90px rgba(0,0,0,.55);

  /* Forma: ~15px em quase tudo; pílula só em rótulos curtos (badges). */
  --r:15px;
  --r-mini:10px;
  --r-pilula:999px;

  /* Espaço (base 4) */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:20px;--e-6:24px;--e-8:32px;--e-10:40px;

  /* Tipografia: SF nos aparelhos Apple; Inter (auto-hospedada) nos demais */
  --fonte:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Nummus','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --t-legenda:12px;--t-pequeno:13px;--t-corpo:15px;--t-destaque:17px;--t-titulo-3:19px;--t-titulo-2:24px;--t-titulo-1:32px;--t-display:40px;

  /* Movimento */
  --curva:cubic-bezier(.32,.72,0,1);   /* desaceleração tipo mola, como no iOS */
  --rapido:.18s;--medio:.38s;

  --sidebar-w:252px;--sidebar-w-collapsed:72px;--menubar-h:60px;

  /* Nomes antigos, mantidos para os estilos em linha das telas */
  --gold:var(--bronze);--gold-light:#F0CB72;--gold-dim:var(--bronze-suave);--gold-border:var(--bronze-borda);
  --bg:var(--fundo);--surface-0:var(--fundo-2);--surface-1:var(--papel);--surface-2:var(--papel-2);
  --surface-glass:var(--papel);--surface-glass-hover:var(--papel-hover);--surface-glass-active:var(--papel-hover);
  --border:var(--borda);--border-strong:var(--borda-forte);
  --text:var(--texto);--text-secondary:var(--texto-2);--text-muted:var(--texto-3);
  --accent:var(--azul);--accent-bg:var(--azul-suave);
  --green:var(--verde);--red:var(--vermelho);--yellow:var(--laranja);--purple:var(--roxo);--orange:var(--laranja);--teal:var(--patina);
  --green-bg:var(--verde-suave);--red-bg:var(--vermelho-suave);--yellow-bg:var(--amarelo-suave);--purple-bg:var(--roxo-suave);
  --shadow:var(--sombra-flutuante);--shadow-sm:var(--sombra-papel);
  --r-xs:var(--r-mini);--r-sm:var(--r);--r-md:var(--r);--r-lg:var(--r);--r-xl:var(--r);--r-full:var(--r-pilula);
  --font:var(--fonte);
  --ease:var(--rapido) var(--curva);
}

/* ── Tema claro ─────────────────────────────────────────────────────────── */
body.light{
  color-scheme:light;
  --bronze:#B8862C;--bronze-forte:#9A6E1E;--bronze-texto:#7F5A14;--bronze-suave:rgba(184,134,44,.12);--bronze-borda:rgba(184,134,44,.34);
  --gold-light:#C99A3B;
  --patina:#1F8A7A;--patina-suave:rgba(31,138,122,.12);
  --fundo:#F2F2F5;--fundo-2:#FAFAFC;
  --papel:rgba(255,255,255,.84);--papel-2:rgba(246,248,251,.94);--papel-hover:rgba(255,255,255,.98);
  --vidro-fundo:rgba(255,255,255,.66);--vidro-forte:rgba(255,255,255,.80);
  --vidro-borda:rgba(255,255,255,.85);--vidro-brilho:rgba(255,255,255,.95);--vidro-sombra-interna:rgba(20,30,50,.06);
  --reflexo:rgba(255,255,255,.55);--reflexo-borda:rgba(255,255,255,.95);
  --texto:#14171F;--texto-2:#475161;--texto-3:#646D7D;
  --borda:rgba(20,30,50,.09);--borda-forte:rgba(20,30,50,.16);
  --verde:#248A3D;--vermelho:#D70015;--amarelo:#B25000;--laranja:#B25000;--azul:#0066CC;--roxo:#8944AB;--ciano:#0071A4;
  --verde-suave:rgba(36,138,61,.10);--vermelho-suave:rgba(215,0,21,.08);--amarelo-suave:rgba(255,159,10,.15);--azul-suave:rgba(0,102,204,.09);--roxo-suave:rgba(137,68,171,.10);
  --luz-1:rgba(255,255,255,.9);--luz-2:rgba(200,208,222,.35);
  --sombra-papel:0 1px 2px rgba(20,30,50,.05),0 8px 24px rgba(20,30,50,.06);
  --sombra-flutuante:0 14px 40px rgba(20,30,50,.14),0 2px 6px rgba(20,30,50,.06);
  --sombra-folha:0 30px 90px rgba(20,30,50,.24);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fundo)}
body{
  min-height:100dvh;background:var(--fundo);color:var(--texto);
  font-family:var(--fonte);font-size:var(--t-corpo);line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.15;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--bronze-texto);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
svg.ico{flex:none;display:inline-block;vertical-align:middle}
[hidden]{display:none!important}
::selection{background:var(--bronze-suave)}
:focus-visible{outline:3px solid var(--bronze-borda);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
td,.card-value,dd,.num{font-variant-numeric:tabular-nums}

/* ── Fundo ambiente (neutro e estático) ────────────────────────────────── */
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% -12%,var(--luz-1),transparent 70%),
    radial-gradient(60% 50% at 100% 100%,var(--luz-2),transparent 70%),
    linear-gradient(180deg,var(--fundo-2) 0%,var(--fundo) 55%)}
#loginScreen,#painel,#app{position:relative;z-index:1}

/* ── Material: vidro (navegação) ───────────────────────────────────────── */
.vidro{
  position:relative;isolation:isolate;
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(180%);
  backdrop-filter:blur(var(--vidro-blur)) saturate(180%);
  border:1px solid transparent;border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--vidro-brilho),inset 0 -1px 0 var(--vidro-sombra-interna),var(--sombra-flutuante);
}
/* Reflexo especular fixo no alto à esquerda, como luz sobre o vidro. */
.vidro::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(70% 60% at 22% 0%,var(--reflexo),transparent 70%),
    linear-gradient(180deg,var(--reflexo) 0%,transparent 36%);
}
/* Borda refratada: mais clara no alto à esquerda, como luz numa lente. */
.vidro::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,var(--reflexo-borda),rgba(255,255,255,.04) 32%,rgba(255,255,255,0) 60%,var(--vidro-borda));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidro{background:var(--vidro-forte)}
}

/* ── Material: papel fosco (conteúdo) ──────────────────────────────────── */
.vidro-papel,.card,.table-wrap,.chart-card{
  background:var(--papel);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--vidro-brilho),var(--sombra-papel);
}

/* ── Marca: a moeda ────────────────────────────────────────────────────── */
.marca-moeda{
  --tam:56px;width:var(--tam);height:var(--tam);flex:none;border-radius:50%;
  display:grid;place-items:center;position:relative;
  font:800 calc(var(--tam) * .46)/1 var(--fonte);letter-spacing:-.06em;color:#3B2A0C;
  background:
    radial-gradient(circle at 34% 26%,#FFF4D6 0 8%,transparent 32%),
    radial-gradient(circle at 50% 50%,#EAC673 0 50%,#B98A33 72%,#7A5A1E 100%);
  box-shadow:inset 0 0 0 calc(var(--tam) * .06) rgba(255,243,209,.32),inset 0 -3px 6px rgba(80,55,10,.45),0 6px 18px rgba(120,85,20,.32);
  text-shadow:0 1px 0 rgba(255,240,200,.65),0 -1px 0 rgba(60,40,5,.3);
}
.marca-moeda::after{content:'';position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(255,243,209,.45)}
.marca-moeda-mini{--tam:34px}

/* ── Movimento reduzido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}