/* Duck Studios — tokens de identidade (v2, set/2026)
 * Fontes: vetores da marca (Duck_logo.ai) + catálogo fev/2026 + referências de UI aprovadas
 * pelo dono em 13/09 (fintech dark: grafite neutro, acento laranja, profundidade real,
 * micro-rótulos mono). Fonte única de verdade visual — nenhuma tela repete cor na mão.
 */

/* A fonte é carregada pelo HTML (link para o Fontshare, ou fonts/satoshi.css local quando
   os arquivos estiverem presentes) — ver design/fonts/README.md. */

:root {
  /* ---- Marca ---- */
  --ds-petroleo:      #082D2A;
  --ds-petroleo-esc:  #0B1E1C;
  --ds-teal:          #018682;   /* cabeça do marreco */
  --ds-laranja:       #F18E25;   /* bico — nas referências aprovadas, é o acento que manda */

  /* ---- Superfícies -------------------------------------------------------
     v2: base grafite NEUTRA (as referências não têm tinta verde no fundo — o verde
     ficava com cara de template). O petróleo segue vivo em marca e documentos. */
  --ds-bg:            #0C0D0F;
  --ds-surface:       #141619;
  --ds-surface-2:     #1C1F23;
  --ds-surface-3:     #262A2F;
  --ds-border:        rgba(255,255,255,.06);
  --ds-border-forte:  rgba(255,255,255,.13);

  /* Elevação: sombra difusa + fio de luz no topo. A v2 aprofunda a segunda camada —
     é a profundidade das referências (NEBO/HSBC), não sombra de admin. */
  --ds-elev-1: 0 1px 2px rgba(0,0,0,.5),
               0 10px 28px -10px rgba(0,0,0,.6),
               inset 0 1px 0 rgba(255,255,255,.05);
  --ds-elev-2: 0 2px 6px rgba(0,0,0,.5),
               0 24px 64px -16px rgba(0,0,0,.75),
               inset 0 1px 0 rgba(255,255,255,.07);
  --ds-elev-afundado: inset 0 2px 6px rgba(0,0,0,.55),
                      inset 0 -1px 0 rgba(255,255,255,.04);
  --ds-glow-acao:     0 6px 20px -6px rgba(18,181,174,.4);

  --ds-grad-surface:   linear-gradient(180deg, #191C20 0%, #121417 100%);
  --ds-grad-surface-2: linear-gradient(180deg, #23272C 0%, #1A1D21 100%);
  --ds-grad-acao:      linear-gradient(180deg, #14B4AC 0%, #028A85 100%);

  /* Neutros do catálogo, para peças que precisam ficar idênticas a ele */
  --ds-cat-bg:        #161616;
  --ds-cat-surface:   #272727;

  /* ---- Texto ---- */
  --ds-txt:           #FFFFFF;
  --ds-txt-2:         rgba(255,255,255,.72);
  --ds-txt-3:         rgba(255,255,255,.45);

  /* ---- Ação e estado -----------------------------------------------------
     Decisão do dono (13/09): ação primária é o VERDE/teal da marca; o laranja do bico
     volta ao papel original — acento raro, nunca botão. */
  --ds-acao:          #2DBDB8;   /* links e acentos teal — 8,4:1 no fundo */
  --ds-acao-fundo:    var(--ds-teal);
  --ds-acao-txt:      #032220;   /* texto escuro sobre o teal: contraste alto */
  --ds-acao-hover:    #3ED3CE;
  --ds-acento:        var(--ds-laranja);
  --ds-ok:            #4ADE80;
  --ds-atencao:       #FBBF24;
  --ds-erro:          #F87171;
  --ds-info:          #60A5FA;

  --ds-ok-bg:         rgba(74,222,128,.13);
  --ds-atencao-bg:    rgba(251,191,36,.13);
  --ds-erro-bg:       rgba(248,113,113,.13);
  --ds-info-bg:       rgba(96,165,250,.13);
  --ds-acento-bg:     rgba(241,142,37,.14);

  /* ---- Tipografia ---- */
  --ds-font: "Satoshi", "Satoshi Static", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Helvetica, Arial, sans-serif;
  --ds-font-marca: var(--ds-font);
  /* micro-rótulos em mono (referência Orbit): dá o tom "instrumento", não "site" */
  --ds-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ds-t-hero:   clamp(2rem, 5vw, 3.5rem);
  --ds-t-titulo: 1.5rem;
  --ds-t-corpo:  0.9375rem;
  --ds-t-meta:   0.75rem;

  --ds-peso-titulo: 500;
  --ds-peso-marca:  700;

  /* ---- Forma ---- */
  --ds-r-chip:  999px;
  --ds-r-card:  20px;
  --ds-r-card-g: 26px;
  --ds-r-campo: 13px;
  --ds-r-btn:   999px;

  /* ---- Movimento ---- */
  --ds-t-rapido: 150ms cubic-bezier(.2,.6,.3,1);

  /* ---- Espaço ---- */
  --ds-e-1: 4px;  --ds-e-2: 8px;  --ds-e-3: 12px;
  --ds-e-4: 16px; --ds-e-5: 24px; --ds-e-6: 40px; --ds-e-7: 64px;

  /* ---- Alvo de toque ---- */
  --ds-toque-min: 44px;
}

/* Dark-only. Tela escura cansa menos em set noturno e não estoura a visão de quem acabou
   de olhar um monitor calibrado. */
body {
  background: var(--ds-bg);
  color: var(--ds-txt);
  font-family: var(--ds-font);
  font-size: var(--ds-t-corpo);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(45,189,184,.3); }

/* Barra de rolagem discreta — a nativa clara denuncia "site sem acabamento" no dark */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px;
                             border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Rótulo técnico: mono, caixa alta, espaçado — o "instrumento de trabalho" das referências */
.ds-rotulo {
  font-family: var(--ds-mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ds-txt-3);
}

/* Chip */
.ds-chip {
  display: inline-flex; align-items: center; gap: var(--ds-e-2);
  padding: 5px 12px; border-radius: var(--ds-r-chip);
  background: var(--ds-grad-surface-2); border: 1px solid var(--ds-border);
  color: var(--ds-txt-2);
  font-size: var(--ds-t-meta); letter-spacing: .02em; white-space: nowrap;
}
.ds-chip--ok      { background: var(--ds-ok-bg);      color: var(--ds-ok);      border-color: rgba(74,222,128,.2); }
.ds-chip--atencao { background: var(--ds-atencao-bg); color: var(--ds-atencao); border-color: rgba(251,191,36,.2); }
.ds-chip--erro    { background: var(--ds-erro-bg);    color: var(--ds-erro);    border-color: rgba(248,113,113,.2); }
.ds-chip--info    { background: var(--ds-info-bg);    color: var(--ds-info);    border-color: rgba(96,165,250,.2); }
.ds-chip--marca   { background: rgba(1,134,130,.16);  color: var(--ds-acao); }
.ds-chip--acento  { background: var(--ds-acento-bg);  color: var(--ds-laranja); border-color: rgba(241,142,37,.22); }

/* Botão primário: laranja das referências, texto escuro, brilho próprio, resposta ao toque */
.ds-btn {
  min-height: var(--ds-toque-min); padding: 0 var(--ds-e-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-e-2);
  border: 0; border-radius: var(--ds-r-btn); cursor: pointer;
  background: var(--ds-grad-acao); color: var(--ds-acao-txt);
  font-family: inherit; font-size: var(--ds-t-corpo); font-weight: 700;
  box-shadow: var(--ds-elev-1), var(--ds-glow-acao);
  transition: transform var(--ds-t-rapido), box-shadow var(--ds-t-rapido),
              filter var(--ds-t-rapido);
  text-decoration: none;
}
.ds-btn:hover  { filter: brightness(1.08); transform: translateY(-1px);
                 box-shadow: var(--ds-elev-2), var(--ds-glow-acao); }
.ds-btn:active { transform: translateY(0); filter: brightness(.97); }
.ds-btn--fantasma {
  background: var(--ds-grad-surface-2); color: var(--ds-txt);
  border: 1px solid var(--ds-border-forte); box-shadow: var(--ds-elev-1);
}
.ds-btn--fantasma:hover { filter: none; background: var(--ds-surface-3); }

.ds-card {
  background: var(--ds-grad-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-card);
  padding: var(--ds-e-5);
  box-shadow: var(--ds-elev-1);
}
.ds-card--alto { box-shadow: var(--ds-elev-2); border-radius: var(--ds-r-card-g); }
/* Card que responde ao passar o mouse — usar em item de lista clicável */
.ds-card--vivo { transition: transform var(--ds-t-rapido), box-shadow var(--ds-t-rapido),
                             border-color var(--ds-t-rapido); }
.ds-card--vivo:hover { transform: translateY(-2px); box-shadow: var(--ds-elev-2);
                       border-color: var(--ds-border-forte); }

/* Campo afundado; botão elevado — "onde eu clico" sem manual */
.ds-campo {
  min-height: var(--ds-toque-min); width: 100%;
  padding: 0 var(--ds-e-4); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-campo); background: #0A0C0E; color: var(--ds-txt);
  font: inherit; box-shadow: var(--ds-elev-afundado);
  transition: border-color var(--ds-t-rapido), outline-color var(--ds-t-rapido);
}
.ds-campo::placeholder { color: rgba(255,255,255,.3); }
.ds-campo:focus { outline: 2px solid var(--ds-acao); outline-offset: 1px;
                  border-color: rgba(45,189,184,.4); }
textarea.ds-campo { padding: 10px var(--ds-e-4); }

:focus-visible { outline: 2px solid var(--ds-acao); outline-offset: 2px; }

.ds-hero { font-size: var(--ds-t-hero); font-weight: var(--ds-peso-titulo); line-height: 1.05; }
.ds-meta { font-size: var(--ds-t-meta); color: var(--ds-txt-3); }

a { color: var(--ds-acao); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important;
                           animation-duration: .01ms !important; }
}

/* Impressão é sempre preto sobre branco (etiqueta QR invertida derruba scanner). */
@media print {
  :root { --ds-bg: #fff; --ds-surface: #fff; --ds-surface-2: #f4f4f4;
          --ds-txt: #000; --ds-txt-2: #333; --ds-txt-3: #666; --ds-border: #ccc; }
}