/* ================= Camada "premium" =================
   Princípios do apple-design (emilkowalski/skills) aplicados ao sistema inteiro,
   carregada por último. Só usa tokens de tokens.css, então vale nos dois temas.
   1. Resposta instantânea   2. Movimento contido   3. Materiais e profundidade
   4. Tipografia por tamanho 5. Contenção           6. Acessibilidade */

:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);   /* sai rápido, assenta suave (sem overshoot) */
  --ease-in-out:cubic-bezier(.45,0,.2,1);
  --t-press:90ms;                        /* feedback do toque: precisa parecer imediato */
  --t-fast:150ms;
  --t-base:220ms;
}

/* ---------- 4. Tipografia: fonte do sistema e tracking por tamanho ---------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* troca de tema suave, sem salto brusco de brilho */
  transition:background-color .35s var(--ease-in-out),color .35s var(--ease-in-out);
}
h1,h2{letter-spacing:-.022em;line-height:1.15}
.top h1{font-weight:650;letter-spacing:-.024em}
.card h3,.mdl h3,.seb-quick-head h3{letter-spacing:-.014em}
.card .hint,.mdl > p{line-height:1.5}
label{letter-spacing:.004em}
/* texto pequeno em caixa alta pede tracking positivo */
th,.eyebrow,.cli-status,.navgrp,.seb-modal-kicker{letter-spacing:.06em}
/* números alinhados em colunas e valores */
.cli-val,.cli-col-total,.ctval,.kh .tot,td{font-variant-numeric:tabular-nums}

/* ---------- 1. Resposta: feedback no clique, não depois ---------- */
.btn,.iconbtn,.nav,.segb,.cli-ico-btn,.cli-add,.cc-opt,.cli-origem,.seb-modal-close,.menubtn{
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    filter var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn:active:not(:disabled),.iconbtn:active,.segb:active,.cli-ico-btn:active,.cli-add:active,
.seb-modal-close:active,.menubtn:active,.cli-origem:active{
  transform:scale(.97);transition-duration:var(--t-press);
}
.nav:active{transform:scale(.985);transition-duration:var(--t-press)}
.cli-card{transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.cli-card:active:not(.static){transform:scale(.985);transition-duration:var(--t-press)}

/* foco visível e consistente para quem navega pelo teclado */
.btn:focus-visible,.iconbtn:focus-visible,.nav:focus-visible,.segb:focus-visible,
.cli-ico-btn:focus-visible,.cli-add:focus-visible,.seb-modal-close:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;
}
input,select,textarea{transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}

/* ---------- 5. Contenção: menos brilho, hierarquia por peso e espaço ---------- */
.btn.pri{box-shadow:0 1px 2px rgba(0,0,0,.22),0 6px 16px -8px rgba(125,92,255,.6)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ok{box-shadow:0 1px 2px rgba(0,0,0,.2),0 6px 16px -8px rgba(47,212,143,.5)}
.nav.on{box-shadow:0 4px 12px -6px rgba(125,92,255,.55)}

/* ---------- 3. Materiais e profundidade ---------- */
/* topo translúcido: o conteúdo rola por baixo, desfocado (camada funcional flutuante) */
.top{
  background:color-mix(in srgb,var(--chrome) 74%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border-bottom-color:transparent;
  box-shadow:0 1px 0 var(--line);
}
/* cartões: sombra proporcional à superfície + filete de luz no topo */
.card{
  box-shadow:0 1px 2px var(--sh1),0 14px 34px -24px var(--sh2),inset 0 1px 0 var(--sf2);
}
/* pop-ups: o fundo escurece para dar foco; a superfície "materializa" (escala + desfoque) */
.ovl,.seb-modal-overlay:not(.hide){animation:gi9-escurece var(--t-base) var(--ease-out)}
.seb-modal-overlay{
  background:color-mix(in srgb,#000 52%,transparent);
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
}
.mdl,.seb-modal-overlay:not(.hide)>.seb-modal,.seb-modal-overlay:not(.hide)>.seb-quick-dialog,
.seb-modal-overlay:not(.hide)>.cli-fech-dialog{
  animation:gi9-materializa 280ms var(--ease-out);
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 40px 90px -30px rgba(0,0,0,.65);
}
@keyframes gi9-escurece{from{opacity:0}to{opacity:1}}
@keyframes gi9-materializa{
  from{opacity:0;transform:translateY(8px) scale(.975);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}

/* rolagem discreta e neutra */
::-webkit-scrollbar-thumb{background:var(--sf4);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sf5);background-clip:padding-box}

/* ---------- 6. Acessibilidade: respeita os ajustes do sistema ---------- */
/* reduzir movimento: troca deslocamento/escala por um cross-fade curto */
@media (prefers-reduced-motion: reduce){
  .btn:active,.iconbtn:active,.segb:active,.cli-ico-btn:active,.cli-add:active,.nav:active,
  .cli-card:active,.cli-origem:active,.seb-modal-close:active,.menubtn:active{transform:none}
  .mdl,.seb-modal-overlay:not(.hide)>*{animation:gi9-escurece 160ms ease-out}
  body{transition:none}
}
/* reduzir transparência: superfícies sólidas, sem desfoque */
@media (prefers-reduced-transparency: reduce){
  .top{background:var(--chrome);-webkit-backdrop-filter:none;backdrop-filter:none}
  .seb-modal-overlay,.ovl{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.72)}
  .card{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* aumentar contraste: bordas definidas */
@media (prefers-contrast: more){
  :root{--line:rgba(255,255,255,.3);--line2:rgba(255,255,255,.45)}
  :root[data-theme="light"]{--line:rgba(0,0,0,.35);--line2:rgba(0,0,0,.5)}
}