:root {
  /* Palette */
  --color-bg: #0a0909;
  --color-surface: #141211;
  --color-border: #2a2725;
  --color-text: #f4ede2;
  --color-text-muted: #b8afa5;
  --color-text-dim: #746c64;
  --color-accent: #f2a93b;
  --color-accent-dark: #d97706;
  --color-accent-2: #d64533;

  /* Gradient ambra */
  --gradient-amber: linear-gradient(135deg, #f2a93b 0%, #e8962a 50%, #d97706 100%);

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing (4px base grid) */
  --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;
  --sp-32: 128px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 100px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-xslow: 1200ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --navbar-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --navbar-h: 72px;
  }
}