/* ============================================================
   Bike Garden — Design tokens
   Paleta extraída de images/logo-bikegarden.png: o logo é
   verde-lima (#c2ce30, ~34% dos pixels não-transparentes) sobre
   branco/cinza -- não tem um "near-black de marca" amostrável (o
   tom mais escuro real no arquivo é cinza-médio ~#5e5e5e, não
   preto). O near-black abaixo é escolha de UI, não extração.
   ============================================================ */
:root {
  /* ---- neutros ---- */
  --color-white: #ffffff;
  --color-bg-subtle: #f7f7f8;      /* fundo de seção, cinza muito claro */
  --color-border: #e4e6e9;
  --color-border-strong: #d0d3d8;

  --color-text-900: #1a1c22;       /* texto principal */
  --color-text-700: #4a4e58;       /* texto secundário */
  --color-text-500: #767b87;       /* texto terciário / placeholder */

  --color-near-black: #12141a;     /* header, footer, títulos de destaque -- preto puro é proibido */

  /* ---- marca (do logo, usar com parcimônia) ---- */
  --color-brand: #c2ce30;
  --color-brand-dark: #9aa424;     /* hover/active do verde-lima */
  --color-brand-text: #6e7a16;     /* versão escurecida, contraste AA em texto sobre branco */
  --color-brand-bg: #f6f8e3;       /* fundo suave */

  /* ---- destaque quente (preço promo, selo de desconto) ---- */
  --color-accent: #e0521e;
  --color-accent-bg: #fdece4;

  /* ---- estoque ---- */
  --color-stock-ok: #1f8a4c;
  --color-stock-low: #b9770e;      /* última unidade */
  --color-stock-out: #c0392b;      /* esgotado */

  /* ---- formulário / feedback ---- */
  --color-success: #1f8a4c;
  --color-success-bg: #e9f7ef;
  --color-error: #c0392b;
  --color-error-bg: #fdecea;

  /* ---- whatsapp (canal de suporte, não é cor de marca) ---- */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe5a;

  /* ---- tipografia ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* só pra código/SKU, não pra branding */

  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-22: 1.375rem;
  --text-28: 1.75rem;
  --text-36: 2.25rem;
  --text-48: 3rem;

  --leading-body: 1.55;
  --tracking-tight: -0.01em;

  /* ---- espaçamento (múltiplos de 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- forma ---- */
  --radius: 6px;        /* raio máximo do site inteiro */
  --radius-sm: 4px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 20, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(18, 20, 26, 0.10);
  --shadow-lg: 0 20px 48px rgba(18, 20, 26, 0.22);

  --header-height: 76px;
  --header-height-mobile: 60px;

  /* ---- aliases de compatibilidade ----
     styles.css (pré-redesign) usa esses nomes por toda parte -- em vez de
     re-escrever centenas de regras numa tacada só (risco de quebrar layout
     existente), os nomes antigos apontam pros tokens novos. CSS novo
     (header, mini-cart, footer, mega-menu) usa só os nomes --color- e --text-
     acima; regras antigas vão migrando aos poucos conforme cada componente
     é reescrito nas próximas etapas. */
  --ink-900: var(--color-near-black);
  --ink-800: var(--color-text-900);
  --ink-soft: var(--color-text-500);
  --lime: var(--color-brand);
  --lime-text: var(--color-brand-text);
  --lime-bg: var(--color-brand-bg);
  --nav-bg: var(--color-bg-subtle);
  --border: var(--color-border);
  --bg: var(--color-white);
  --card-bg: var(--color-white);
  --whatsapp: var(--color-whatsapp);
  --whatsapp-dark: var(--color-whatsapp-dark);
  --radius: 6px;
  --mono: var(--font-mono);
}