:root {
    /* Category Colors */
    --color-bills: #c53030;
    --color-equipment: #2b6cb0;
    --color-kids: #38a169;
    --color-medical: #d69e2e;
    --color-other: #718096;

    /* Primary Brand Colors */
    --color-primary: #6b46c1;
    --color-primary-light: #805ad5;
    --color-primary-dark: #553c9a;
    --color-secondary: #d35400;
    --color-accent: #38a169;
    --color-accent-light: #48bb78;

    /* Background Colors */
    --color-cream: #f7f5fb;
    --color-warm-white: #fffefb;
    --color-bg-theme: var(--color-cream);

    /* Text Colors */
    --color-text: #2d3748;
    --color-text-muted: #4a5568;

    /* Border & Utility Colors */
    --color-border: #e2e8f0;
    --color-glass: rgba(255, 255, 255, 0.8);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --radius: 8px;
    --radius-lg: 12px;

    /* Typography */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;

    /* Component-Specific Variables (can be overridden by themes) */
    --hero-overlay: rgba(0, 0, 0, 0.3);
    --hero-bg-image: none;
    --card-hover-transform: translateY(-4px);
    --button-border-radius: var(--radius);
}

/* Theme: PayIt4Word */
[data-theme="payit4word"] {
    --color-primary: #27ae60;
    --color-primary-light: #2ecc71;
    --color-primary-dark: #1e8449;
    --color-accent: #f39c12;
    --color-accent-light: #f39c12;
    --color-bg-theme: #f0fdf4;
    --hero-bg-image: url('../payit4word/hero.png');
    --hero-overlay: rgba(0, 0, 0, 0.5);
}

/* Theme: AfterChurch */
[data-theme="afterchurch"] {
    --color-primary: #d35400;
    --color-primary-light: #e67e22;
    --color-accent: #27ae60;
    --color-accent-light: #2ecc71;
    --color-bg-theme: #fffbf2;
    --hero-bg-image: url('../afterchurch/hero.jpg');
    --hero-overlay: rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-cream);
    color: var(--color-text);
    line-height: 1.6;
}