/* ===================================================================
   BitChat Design System Tokens v1 — fonte da verdade COMPARTILHADA
   Servido estaticamente em /styles/tokens-v1.css
   Consumido pelo SPA (index.html) E pelas paginas estaticas em public/
   (checkout, conheca, modulos). NAO duplicar valores de marca em outro lugar.
   =================================================================== */
:root {
  /* --- Marca --- */
  --ds-color-brand-primary: #2563eb;
  --ds-color-brand-primary-dark: #1d4ed8;
  --ds-color-brand-primary-light: #3b82f6;
  --ds-color-brand-accent: #00b4d8;
  --ds-color-brand-purple: #7c3aed;
  --ds-color-brand-purple-light: #a855f7;

  /* --- Semanticas --- */
  --ds-color-success: #059669;
  --ds-color-warning: #f59e0b;
  --ds-color-danger: #ef4444;
  --ds-color-info: #0ea5e9;

  /* --- Texto --- */
  --ds-color-text-primary: #1a1a2e;
  --ds-color-text-secondary: #64748b;
  --ds-color-text-muted: #8696a0;
  --ds-color-text-inverse: #ffffff;

  /* --- Superficies --- */
  --ds-color-surface-page: #ffffff;
  --ds-color-surface-alt: #f8fafc;
  --ds-color-surface-card: #ffffff;
  --ds-color-border-default: #e2e8f0;

  /* --- Dark accent (seccoes/cards escuros de respiro) --- */
  --ds-color-surface-ink: #0b1220;
  --ds-color-surface-ink-2: #131c2e;
  --ds-color-surface-ink-border: rgba(255, 255, 255, 0.08);

  /* --- Tipografia --- */
  --ds-font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-family-heading: "Sora", "Manrope", "Segoe UI", sans-serif;

  /* Escala de impacto fluida */
  --ds-font-size-display: clamp(38px, 6vw, 68px);
  --ds-font-size-h1: clamp(32px, 4.6vw, 54px);
  --ds-font-size-h2: clamp(26px, 3.6vw, 42px);
  --ds-font-size-h3: clamp(19px, 2.2vw, 26px);
  --ds-tracking-tight: -0.02em;

  /* --- Raios --- */
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-2xl: 24px;
  --ds-radius-pill: 999px;

  /* --- Sombras --- */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ds-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
  --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
  --ds-shadow-xl: 0 28px 70px rgba(15, 23, 42, 0.18);
  --ds-shadow-glow-primary: 0 18px 50px rgba(37, 99, 235, 0.22);

  /* --- Gradientes de marca --- */
  --ds-gradient-brand: linear-gradient(135deg, var(--ds-color-brand-primary), var(--ds-color-brand-purple));
  --ds-gradient-brand-vivid: linear-gradient(120deg, #2563eb 0%, #4f46e5 45%, #7c3aed 100%);
  --ds-gradient-accent: linear-gradient(135deg, var(--ds-color-brand-primary), var(--ds-color-brand-accent));
  --ds-gradient-hero: linear-gradient(160deg, #eef4ff 0%, #e6f0ff 28%, #eaf7ff 55%, #f3fbf6 80%, #ffffff 100%);
  --ds-gradient-ink: linear-gradient(160deg, var(--ds-color-surface-ink) 0%, var(--ds-color-surface-ink-2) 100%);

  /* --- Transicao padrao --- */
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
}