/* ============================================================
   ELETROMUV — Design Tokens
   Fonte de verdade para cores, tipografia, espaçamento e glassmorphism.
   Ref: eletromuv_design_system_v2.html
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --orange: #FF4900;
  --orange-hover: #CC3A00;
  --orange-dim: rgba(255, 73, 0, 0.14);
  --orange-border: rgba(255, 73, 0, 0.35);

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg: #191919;
  --bg-alt: #141414;
  --bg-deep: #0e0e0e;
  --surface: #222222;
  --surface-elevated: #2e2e2e;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --text-subtle: #555555;
  --text-faint: #3a3a3a;

  /* ── Borders ───────────────────────────────────────────── */
  --border-default: #333333;

  /* ── Glassmorphism ─────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 73, 0, 0.35);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-shadow-hover: 0 16px 48px rgba(255, 73, 0, 0.12);

  /* ── Orbs (método Malewicz) ────────────────────────────── */
  --orb-color-hero: rgba(255, 73, 0, 0.26);
  --orb-color-card: rgba(255, 73, 0, 0.22);

  /* ── WhatsApp ──────────────────────────────────────────── */
  --whatsapp: #25D366;

  /* ── Radius ────────────────────────────────────────────── */
  --radius-card: 16px;
  --radius-btn: 10px;

  /* ── Layout ────────────────────────────────────────────── */
  --max-w: 1200px;

  /* ── Spacing (fluid) ───────────────────────────────────── */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 60px;
  --sp-4xl: 80px;

  /* ── Section padding (responsive via clamp) ────────────── */
  --section-pad-y: clamp(56px, 8vw, 96px);
  --section-pad-x: clamp(16px, 4vw, 24px);

  /* ── Touch target (Apple HIG / WCAG) ───────────────────── */
  --touch-min: 44px;

  /* ── Safe area (iOS notch / bottom bar) ────────────────── */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}