:root {
  /* ─── Color Tokens ─────────────────────────────────── */
  --color-primary:        #C9972A;
  --color-primary-hover:  #A3761F;
  --color-secondary:      #1A1A2E;
  --color-secondary-hover:#121222;
  --color-bg-warm:        #FDF9F3;
  --color-surface:        #FFFFFF;
  --color-text-main:      #1F2937;
  --color-text-muted:     #4B5563;
  --color-success:        #1E6B3C;
  --color-error:          #991B1B;
  --color-border:         #D1D5DB;

  /* ─── Typography Tokens ─────────────────────────────── */
  --font-family-headings: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-body:     'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-base:   16px;
  --font-size-label:  18px;
  --font-size-button: 18px;
  --font-size-h4:     20px;
  --font-size-h3:     24px;
  --font-size-h2:     30px;
  --font-size-h1:     38px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ─── Spacing Scale ──────────────────────────────────── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-xxl: 64px;

  /* ─── Layout & Styling ───────────────────────────────── */
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --tap-target-min:   48px;
  --shadow-subtle:    0 4px 16px rgba(26, 26, 46, 0.04);
  --shadow-medium:    0 8px 30px rgba(26, 26, 46, 0.08);
  --shadow-card:      0 8px 24px rgba(26, 26, 46, 0.10);
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Layout Widths ──────────────────────────────────── */
  --max-width-content: 1160px;
  --header-height:     80px;
}

@media (max-width: 600px) {
  :root {
    --space-xxl: 48px;
    --space-xl:  32px;
    --space-lg:  24px;
    --header-height: 70px;
  }
}