/* =========================================================
   COLORS.CSS
   Single source of truth for all color tokens on the site.
   Do not hardcode hex values anywhere else — reference these
   custom properties only. This keeps the palette consistent
   and lets the whole site be retinted from one file.
   ========================================================= */

:root {
  /* ---------- Core devotional palette (brief-locked) ---------- */
  --color-maroon: #8F2924;          /* Primary Temple Maroon */
  --color-maroon-deep: #651A17;     /* Deep Maroon */
  --color-gold: #D5A72C;            /* Antique Gold */
  --color-gold-light: #E8C766;      /* Light Gold */
  --color-ivory: #FFF9ED;           /* Ivory */
  --color-cream: #F8F0DF;           /* Cream */
  --color-text-dark: #342722;       /* Dark Text */
  --color-border: #E8DCC8;          /* Border */

  /* ---------- Derived / functional tones ---------- */
  --color-maroon-tint: #A83C36;     /* hover state for maroon surfaces */
  --color-maroon-10: rgba(143, 41, 36, 0.10);
  --color-maroon-20: rgba(143, 41, 36, 0.20);
  --color-gold-10: rgba(213, 167, 44, 0.10);
  --color-gold-30: rgba(213, 167, 44, 0.30);
  --color-white: #FFFFFF;
  --color-text-muted: #6B5B50;      /* secondary text on light backgrounds */
  --color-text-on-maroon: #FFF9ED;  /* text placed on maroon backgrounds */
  --color-text-on-gold: #3A2A10;    /* text placed on gold backgrounds */

  /* ---------- Surfaces ---------- */
  --surface-page: var(--color-ivory);
  --surface-alt: var(--color-cream);
  --surface-header: var(--color-ivory);
  --surface-topbar: var(--color-maroon-deep);
  --surface-footer: var(--color-maroon-deep);

  /* ---------- Shadows (soft, warm — never pure black) ---------- */
  --shadow-soft: 0 2px 10px rgba(101, 26, 23, 0.08);
  --shadow-medium: 0 6px 24px rgba(101, 26, 23, 0.14);
  --shadow-gold-glow: 0 0 0 3px var(--color-gold-30);

  /* ---------- Social brand colors (hover states only) ---------- */
  --color-facebook: #1877F2;
  --color-instagram: #E4405F;
  --color-youtube: #FF0000;
  --color-whatsapp: #25D366;

  /* ---------- Status colors (forms / alerts) ---------- */
  --color-success: #3E7B4F;
  --color-success-bg: #EAF4EC;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE9;
  --color-info: var(--color-maroon);
  --color-info-bg: var(--color-maroon-10);
}