/* ==========================================================================
   Liscan Pay — tokens de design
   --------------------------------------------------------------------------
   TEMA ÚNICO ESCURO (decisão de marca, 20/08). Todas as cores pintadas
   explicitamente — nada depende do tema do sistema.

   A tríade da marca no site: VERDE é ação (botões, acentos de texto),
   DOURADO é o CTA dentro dos cards, VERMELHO é traço decorativo (filetes,
   aspas, separadores) — nunca texto nem botão, para não colidir com a
   semântica de erro numa página de pagamentos.
   ========================================================================== */

/* Inter servida do próprio domínio (fonte variável, um arquivo para todos os
   pesos). Tira a única dependência externa que restava e ~100ms de conexão. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

:root {
  /* ---- Cores do símbolo ---- */
  --brand-green: #0e5c3a;
  --brand-red: #c8102e;
  --brand-gold: #d3b77c;
  --brand-gold-dark: #b9995a;

  /* ---- Ação (verde) ---- */
  --emerald: #00a86b;
  --emerald-deep: #007a4d;   /* fundo dos botões primários (texto branco: 5.4:1) */
  --emerald-dark: #00623d;
  --emerald-bright: #0abd7b;
  --accent-ink: #0abd7b;     /* acentos de TEXTO sobre o fundo escuro */

  /* ---- Detalhe (vermelho, versão erguida para fundo escuro) ---- */
  --accent-red: #e0273f;
  /* O vermelho da marca em texto pequeno sobre o fundo escuro da notificacao
     rende 3,84:1, abaixo do minimo de 4,5:1. Esta variante clara e so para
     TEXTO; filete, icone e area preenchida continuam no --accent-red. */
  --accent-red-ink: #ff5c6e;

  /* ---- Verde-petróleo: 4ª cor da paleta herdada do site antigo ---- */
  --accent-teal: #3fb8a6;

  /* ---- Superfícies ---- */
  --surface: #060d08;
  /* fundo do hero: um degrau abaixo da pagina, para a secao de abertura
     assentar mais do que o resto. Estava fixo em styles.css e por isso nao
     acompanhava troca de tema. */
  --surface-deep: #071009;
  --surface-alt: #0b1610;
  --forest: #0d1c13;         /* cards escuros — um degrau acima da página */
  --forest-soft: #14291d;
  --card-line: rgb(245 242 234 / 12%);
  --shadow-card: none;

  /* ---- Texto ---- */
  --ink: #eef0ea;
  --ink-soft: #a9b8ae;
  --cream: #f5f2ea;
  --cream-soft: #b3c0b8;
  --line: #1a2a20;

  /* ---- Header e botões ---- */
  --header-bg: rgb(6 13 8 / 88%);
  --header-bg-stuck: rgb(9 18 12 / 95%);
  --outline-border: rgb(245 242 234 / 30%);
  --outline-hover-bg: rgb(245 242 234 / 6%);

  /* ---- Tipografia (Inter, títulos 500, corpo até 20px — como o site antigo) ---- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-title: 450;
  --weight-strong: 550;

  --step--2: clamp(0.78rem, 0.75rem + 0.12vw, 0.84rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.16vw, 1rem);
  --step-0: clamp(1.05rem, 0.98rem + 0.32vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.28rem + 1vw, 2.25rem);
  --step-3: clamp(1.8rem, 1.35rem + 2vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.55rem + 2.9vw, 3.7rem);

  /* ---- Espaço e forma (escala do site antigo) ---- */
  --header-h: 6.9rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --card-pad: clamp(1.75rem, 4vw, 4rem);

  --radius-pill: 10px;
  --radius-pill-sm: 8px;
  --radius-card: 14px;
  --radius-card-sm: 12px;
  --radius-img: 8px;
  --radius-input: 8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}