/* =========================================
   VARIABLES — Crusaders Outreach Ministries
   Warm neutrals + deep navy + gold accents
   ========================================= */

:root {
    /* Brand Colors */
    --color-navy: #0d1b2a;
    --color-navy-light: #1b263b;
    --color-gold: #c9a227;
    --color-gold-light: #e8c766;

    /* Neutrals */
    --color-white: #ffffff;
    --color-offwhite: #f7f7f7;
    --color-gray-100: #f0f0f0;
    --color-gray-200: #e0e0e0;
    --color-gray-300: #cfcfcf;
    --color-gray-400: #b0b0b0;
    --color-gray-500: #8a8a8a;
    --color-gray-600: #6a6a6a;
    --color-gray-700: #4a4a4a;
    --color-gray-800: #2e2e2e;

    /* Text Colors */
    --text-dark: var(--color-navy);
    --text-body: var(--color-gray-700);
    --text-light: var(--color-gray-500);

    /* Backgrounds */
    --bg-light: var(--color-offwhite);
    --bg-white: var(--color-white);
    --bg-dark: var(--color-navy);

    /* Buttons */
    --btn-primary-bg: var(--color-navy);
    --btn-primary-text: var(--color-white);
    --btn-secondary-bg: var(--color-gold);
    --btn-secondary-text: var(--color-navy);

    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 3px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.2);

    /* Typography */
    --font-base: "Inter", "Segoe UI", Arial, sans-serif;
    --font-heading: "Inter", "Segoe UI", Arial, sans-serif;

    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.6rem;
    --text-xxl: 2.2rem;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Layout */
    --container-width: 1200px;

    /* Breakpoints */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Footer Colors */
    --footer-bg: var(--color-navy);
    --footer-text: var(--color-white);
    --footer-text-muted: var(--color-gray-200);
    --footer-link: var(--color-gold-light);
    --footer-link-hover: var(--color-white);
}