/* ==========================================================================
   sf-tokens.css — Design System Super Finanças
   --------------------------------------------------------------------------
   Os valores aqui não foram inventados: foram extraídos do tema em produção
   (superfinancas-0.7.24) em superfinancas.com.br. Os tokens de cor são
   copiados literalmente em oklch(), sem conversão para hex, para eliminar
   desvio de cor em relação ao site.

   A nomenclatura segue o padrão de construção de sites da casa
   (--c-*, --fs-*, --gap*, --container-*), de modo que qualquer página nova
   possa importar este arquivo e herdar a marca sem reescrever tokens.

   Ordem: fontes → reset → tokens → elementos → layout → utilitários
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTES — self-hosted, mesma origem, zero chamada a terceiros.
   Cópias de .../themes/superfinancas-0.7.24/assets/fonts/. Copiadas de
   propósito: o caminho do tema carrega a versão cravada e quebraria na
   próxima atualização.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --container-narrow: 768px;   /* = content-size do tema (48rem) */
  --container-wide: 1280px;    /* = wide-size do tema (80rem)   */
  --container-pad: clamp(1rem, 0.72rem + 1.25vw, 2.5rem);  /* wrap-pad do tema */

  /* --- Espaçamento ------------------------------------------------------- */
  --section-y: clamp(3.75rem, 3.09rem + 2.82vw, 5.625rem);      /* 60 → 90 */
  --section-y-tight: clamp(2.5rem, 2.06rem + 1.88vw, 3.75rem);  /* 40 → 60 */

  --gap: 1.25rem;      /* 20px */
  --gap-sm: 0.75rem;   /* 12px */
  --gap-lg: 2.5rem;    /* 40px */
  --gap-xl: 3.75rem;   /* 60px */

  /* --- Tipografia -------------------------------------------------------- */
  --font-body: "Lexend", system-ui, -apple-system, sans-serif;
  --font-head: "Merriweather", Georgia, "Times New Roman", serif;

  --fs-xs:   0.75rem;
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h4:   clamp(1.25rem, 1.15rem + 0.45vw, 1.563rem);
  --fs-h3:   clamp(1.5rem, 1.32rem + 0.80vw, 2.125rem);
  --fs-h2:   clamp(1.875rem, 1.55rem + 1.45vw, 2.875rem);
  --fs-h1:   clamp(2.25rem, 1.70rem + 2.40vw, 4rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* --- Cor: superfícies --------------------------------------------------- */
  --c-bg: #FFFCF2;                  /* creme do site  */
  --c-bg-alt: #faf5e3;              /* creme alternado */
  --c-surface: oklch(1 0 0);        /* card branco     */
  --c-surface-muted: oklch(0.93 0.02 95);

  /* --- Cor: tinta --------------------------------------------------------- */
  --c-text: oklch(0.22 0.04 160);   /* ~17:1 sobre o creme */
  --c-muted: oklch(0.45 0.03 160);  /* ~7:1  — passa em AA  */
  --c-border: oklch(0.85 0.02 95);

  /* --- Cor: marca --------------------------------------------------------- */
  --c-primary: #161616;
  --c-primary-contrast: oklch(0.97 0.025 95);
  --c-accent: #FFB000;              /* ouro — CTA          */
  --c-accent-ink: #161616;          /* texto sobre o ouro  */
  --c-secondary: oklch(0.48 0.1 160); /* verde da marca    */

  /* --- Cor: estados -------------------------------------------------------
     O verde positivo é o próprio verde da marca. O vermelho NÃO é o
     --bn-down (#fca5a5) do site: aquele tom claro existe para ticker sobre
     fundo escuro e reprovaria em contraste sobre creme. Este é derivado na
     mesma luminância do verde (L=0.48), para positivo e negativo pesarem
     igual na tela.
     ---------------------------------------------------------------------- */
  --c-positive: oklch(0.48 0.10 160);
  --c-positive-bg: oklch(0.95 0.03 160);
  --c-negative: oklch(0.48 0.15 25);
  --c-negative-bg: oklch(0.95 0.03 25);
  --c-warn: oklch(0.52 0.12 75);
  --c-warn-bg: oklch(0.95 0.04 85);

  --c-focus: var(--c-primary);

  /* --- Outros ------------------------------------------------------------- */
  --radius-xs: 8px;
  --radius: 16px;
  --radius-pill: 999px;
  --shadow: 0 2px 8px -2px color-mix(in oklab, #161616 20%, transparent);
  --shadow-lg: 0 4px 20px -6px color-mix(in oklab, #161616 28%, transparent);
  --header-h: 4.5rem;
}

/* Breakpoints do padrão (media query não aceita variável — referência):
   md = 48em (768px)   |   lg = 64em (1024px)   */

/* --------------------------------------------------------------------------
   3. ELEMENTOS
   -------------------------------------------------------------------------- */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: 0; line-height: var(--lh-snug); }

p { max-width: 68ch; text-wrap: pretty; }

a { color: inherit; }

[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--c-bg-alt); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: flex-start;
}
.stack--sm { gap: var(--gap-sm); }
.stack--lg { gap: var(--gap-lg); }

.grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 280px), 1fr));
}
.grid--2 { --col-min: 420px; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--c-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* Alvo de toque mínimo de 44×44px sem inflar o visual do elemento. */
.tap-target {
  position: relative;
}
.tap-target::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}