/* =========================================================
   variables.css – Design tokens (colors, typography, spacing)
   All other CSS files reference these custom properties so
   the site theme can be changed from a single place.
   ========================================================= */

:root {
  /* --- Brand Colors --- */
  --color-primary:       #e07b39;   /* Warm orange – CTAs, accents          */
  --color-primary-dark:  #c4611f;   /* Darker orange – hover states          */
  --color-primary-light: #fdf0e6;   /* Tint – background highlights          */

  /* --- Neutral Palette --- */
  --color-bg:            #ffffff;
  --color-bg-light:      #f7f7f7;   /* Alternate section background          */
  --color-text:          #1a1a1a;
  --color-text-muted:    #6b7280;
  --color-border:        #e5e7eb;

  /* --- Dark (footer / banner overlay) --- */
  --color-dark:          #1c1008;
  --color-dark-overlay:  rgba(28, 16, 8, 0.65);

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', sans-serif;

  /* --- Spacing scale --- */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 5rem;      /* 80px */

  /* --- Border radius --- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.14);

  /* --- Transitions --- */
  --transition-base: 0.25s ease;
  --transition-slow: 0.45s ease;

  /* --- Container max width --- */
  --max-width: 1200px;
}