/* =========================================================
   Design Tokens — CSS Custom Properties
   Ajuste os valores aqui para alterar toda a identidade visual
   ========================================================= */
:root {
  /* ─── Colors ─────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-bg-alt:       #f5f6f8;
  --color-bg-dark:      #1a1a1a;
  --color-bg-dark-2:    #222222;
  --color-text:         #1a1a2e;
  --color-text-muted:   #6b7280;
  --color-text-light:   #9ca3af;
  --color-accent:       #00BCD4;
  --color-accent-hover: #00ACC1;
  --color-border:       #e5e7eb;
  --color-white:        #ffffff;
  --color-brand-red:    #e53935;
  --color-nav-bg:       #1a1a1a;

  /* ─── Typography ──────────────────────────────── */
  --font-family:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ─── Spacing ─────────────────────────────────── */
  --section-py:    5rem;
  --section-py-sm: 3rem;

  /* ─── Border Radius ───────────────────────────── */
  --radius:        0.75rem;
  --radius-lg:     1.25rem;
  --radius-circle: 50%;

  /* ─── Shadows ─────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);

  /* ─── Transitions ─────────────────────────────── */
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;

  /* ─── Navbar height (usada em page-banner e hero) */
  --nav-height: 108px;
}