/* ============================================================
   MODULE: CSS Variables & Design Tokens
   Greater Tshwane Area — Church Website
   ============================================================ */

:root {
  /* ── Colour Palette ── */
  --cream:         #FDF8F0;
  --warm-white:    #FEFCF8;
  --soft-gold:     #D4A853;
  --gold-light:    #F0E2C0;
  --gold-hover:    #E6BB65;
  --sage:          #7A8B6F;
  --sage-light:    #E8EDE5;
  --sage-dark:     #4A5C40;
  --deep-brown:    #3E2B1C;
  --warm-brown:    #6B4E37;
  --terracotta:    #C17B4A;
  --sky:           #8AAFCC;
  --sky-light:     #E4EEF5;
  --error:         #C0392B;
  --success:       #27AE60;

  /* ── Text ── */
  --text-primary:   #2C2118;
  --text-secondary: #6B5D52;
  --text-light:     #9A8C82;

  /* ── Borders & Shadows ── */
  --border:         #E8DDD2;
  --border-focus:   var(--soft-gold);
  --shadow-sm:      0 2px 8px rgba(62,43,28,0.06);
  --shadow:         0 4px 24px rgba(62,43,28,0.08);
  --shadow-md:      0 8px 32px rgba(62,43,28,0.10);
  --shadow-lg:      0 16px 56px rgba(62,43,28,0.14);

  /* ── Typography ── */
  --font-heading:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:   'Dancing Script', cursive;

  /* ── Layout ── */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-y:     96px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;

  /* ── Transitions ── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration:      0.3s;
  --duration-slow: 0.6s;
}

/* ── Responsive Scaling ── */
@media (max-width: 768px) {
  :root {
    --section-y: 64px;
  }
}