/* Bike Mania — Design Tokens (P2-2 / Task #21)
 *
 * Sistema de design pra subir do "template Nuvemshop genérico" pra
 * identidade Bike Mania. Tokens consumidos por app.css. Compat:
 * vars antigas (--bm-accent, --bm-fg, --bm-bg, --bm-header-bg,
 * --bm-nav-bg, --bm-footer-bg) sobrevivem como alias dos novos
 * tokens (declaradas no :root de app.css, sem mudança visual).
 *
 * Carregado via base.html antes de app.css. base.html também declara
 * `<style>` inline pro @font-face do Inter (necessário pra interpolar
 * `?v={{ asset_version }}` no src dos .woff2 — cache-bust de CF).
 */

/* === Self-hosted Inter (rsms.me/inter, OFL) ============================ */
/* @font-face MOVED to base.html inline <style> (2026-05-16) — precisamos
 * versionar o src do .woff2 com `?v={{ asset_version }}` pra escapar do
 * cache CF de 24h. CSS estático não é template Jinja2; HTML é. Cache-bust
 * dos próprios .woff2 via URL versionada faz a transição segura entre
 * versões antigas (sem CORS header no edge) e novas (com CORS).
 *
 * `--bm-font-sans` abaixo continua usando 'Inter' — declarations em
 * base.html populam o font-face no início do parse, antes deste CSS.
 */

:root {
  /* === Paleta — cinzas (neutros) ====================================== */
  --bm-gray-50:  #fafafa;
  --bm-gray-100: #f4f4f4;
  --bm-gray-200: #e6e6e6;
  --bm-gray-300: #d4d4d4;
  --bm-gray-400: #a3a3a3;
  --bm-gray-500: #737373;
  --bm-gray-600: #525252;
  --bm-gray-700: #404040;
  --bm-gray-800: #262626;
  --bm-gray-900: #171717;

  /* === Brand accent — verde Bike Mania ================================ */
  /* #81d146 é o accent histórico (500). Derivados manualmente em HSL
   * (~hsl(96, 60%, 55%)) pra preservar fidelidade da marca. */
  --bm-accent-50:  #f3fbe9;
  --bm-accent-100: #e3f6cf;
  --bm-accent-200: #c8ed9f;
  --bm-accent-300: #aae26b;
  --bm-accent-400: #95d951;
  --bm-accent-500: #81d146; /* core */
  --bm-accent-600: #6db534; /* dark — botão hover */
  --bm-accent-700: #588f29;
  --bm-accent-800: #436b1e;
  --bm-accent-900: #2d5212; /* navbar antigo / progress-bar end */

  /* === Feedback ======================================================= */
  --bm-success-50:  #e8f8e9;
  --bm-success-500: #2d8c34;
  --bm-success-700: #1e6a25;

  --bm-warning-50:  #fff4e0;
  --bm-warning-500: #d68910;
  --bm-warning-700: #b86d00;

  --bm-danger-50:   #fdecea;
  --bm-danger-500:  #e74c3c;
  --bm-danger-700:  #c0392b;

  --bm-info-50:     #e1ecff;
  --bm-info-500:    #2563eb;
  --bm-info-700:    #1a5dc8;

  /* === Espaçamento — 4px base ========================================= */
  --bm-space-1:  4px;
  --bm-space-2:  8px;
  --bm-space-3:  12px;
  --bm-space-4:  16px;
  --bm-space-5:  20px;
  --bm-space-6:  24px;
  --bm-space-8:  32px;
  --bm-space-10: 40px;
  --bm-space-12: 48px;
  --bm-space-16: 64px;
  --bm-space-20: 80px;
  --bm-space-24: 96px;

  /* === Tipografia ===================================================== */
  --bm-font-sans: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --bm-font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas,
                  monospace;

  --bm-text-xs:   12px;
  --bm-text-sm:   14px;
  --bm-text-base: 16px;
  --bm-text-lg:   18px;
  --bm-text-xl:   20px;
  --bm-text-2xl:  24px;
  --bm-text-3xl:  30px;
  --bm-text-4xl:  36px;
  --bm-text-5xl:  48px;

  --bm-weight-regular:  400;
  --bm-weight-medium:   500;
  --bm-weight-semibold: 600;
  --bm-weight-bold:     700;

  --bm-leading-tight:   1.2;
  --bm-leading-normal:  1.5;
  --bm-leading-relaxed: 1.7;

  --bm-tracking-tight:  -0.01em;
  --bm-tracking-normal: 0;
  --bm-tracking-wide:   0.05em;
  --bm-tracking-wider:  0.1em;

  /* === Radius ========================================================= */
  --bm-radius-sm:   4px;
  --bm-radius-md:   6px;
  --bm-radius-lg:   8px;
  --bm-radius-xl:   12px;
  --bm-radius-full: 9999px;

  /* === Shadow — escala progressiva ==================================== */
  --bm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bm-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
  --bm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --bm-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16);

  /* === Transitions ==================================================== */
  --bm-transition-fast: 0.15s ease;
  --bm-transition-base: 0.2s ease;
  --bm-transition-slow: 0.3s ease;

  /* === Z-index ======================================================== */
  --bm-z-base:     1;
  --bm-z-dropdown: 100;
  --bm-z-sticky:   500;
  --bm-z-modal:    1000;
  --bm-z-toast:    2000;
}