:root {
  /* Colors */
  --color-bg:                  #0a0a0a;
  --color-surface:             #131313;
  --color-surface-low:         #1c1b1b;
  --color-surface-container:   #201f1f;
  --color-surface-high:        #2a2a2a;
  --color-surface-highest:     #353534;
  --color-on-surface:          #e5e2e1;
  --color-on-surface-variant:  #c0bbb8;
  --color-primary:             #ff6b00;
  --color-on-primary:          #000000;
  --color-white:               #ffffff;
  --color-whatsapp:            #25d366;

  /* Typography */
  --font-display: 'Anton', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Font sizes */
  --text-display:    clamp(3rem, 12vw, 6rem);
  --text-h2:         clamp(2rem, 6vw, 3rem);
  --text-h3:         clamp(1.5rem, 4vw, 2rem);
  --text-body-lg:    1.125rem;
  --text-body:       1rem;
  --text-label:      0.875rem;
  --text-label-sm:   0.75rem;

  /* Spacing scale (8px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout */
  --container-max:    1200px;
  --container-narrow: 740px;
  --header-h:         64px;
  --margin-x:         20px;

  /* Borders */
  --radius:           0px;
  --border-primary:   1px solid var(--color-primary);
  --border-white:     1px solid var(--color-white);
  --border-subtle:    1px solid var(--color-surface-highest);

  /* Motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration-sm: 150ms;
  --duration-md: 250ms;
  --duration-lg: 400ms;

  /* Z-indices */
  --z-float: 40;
  --z-nav:   100;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}