:root {
    /* Base colors - CHANGE THESE to customize your theme */
    /*What we chose:*/
    --color-primary-base: #e3c56c; /* Main accent color (the main gold color) */
    /* Auto-generated primary variants using color-mix() */
    --color-primary: var(--color-primary-base);
    /* Lighter variant: mix 75% base color with 25% white */
    --color-primary-light: color-mix(in srgb, var(--color-primary-base) 75%, white);
    /* ============================================
       TEXT COLORS
       ============================================ */
    --color-text: #222222; /* Main text color */
    --color-text-inverse: #ffffff; /* White text for dark backgrounds */
    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --color-bg: #fff3dd; /* Main background (white) */
    /* ============================================
       HERO / BACKGROUND IMAGES
       Configure all full-page hero images here.
       ============================================ */
    --image-hero-home: url('/images/heroimages/hero-main.jpeg'); /* First page (Index) */
    --image-hero-content: url('/images/heroimages/hero-second.jpeg'); /* Bio, Gallery, Concerts */
    /* ============================================
       COMPONENT-SPECIFIC COLORS
       ============================================ */
    /* Header */
    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-text);
    --color-header-text-hero: var(--color-text-inverse); /* Text color on hero page - change this to try different colors */
    /* Accordion (Concerts page) */
    --color-accordion-bg: var(--color-primary);
    --color-accordion-bg-hover: var(--color-primary-light);
    --color-accordion-bg-active: var(--color-primary);
    --color-accordion-body: rgba(255, 255, 255, 0.64);
    --color-accordion-text: var(--color-text);
    --color-accordion-text-active: var(--color-text);
    --color-accordion-border: var(--color-text);
    /* Links */
    --color-link: var(--color-text);
    --color-link-hover: var(--color-text);
    /* ============================================
       SPACING SYSTEM
       ============================================ */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */
    --spacing-2xl: 4rem; /* 64px */
    /* Component-specific spacing */
    --spacing-page-horizontal: 1.25rem; /* 20px - page container padding */
    --spacing-header-height: 180px; /* Header height */
    --spacing-gallery-gap: 0.9375rem; /* 15px - gallery gap */
    /* ============================================
       TYPOGRAPHY
       ============================================ */

    --font-family: "Source Sans Pro", "Segoe UI", sans-serif;
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.6;
    --line-height-tight: 1.4;
    --line-height-relaxed: 1.8;
    /* ============================================
       BORDERS & SHADOWS
       ============================================ */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    --border-width: 0px;
    --border-color: #eaeaea;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all var(--transition-normal);
    --transition-color: color var(--transition-fast);
    --transition-transform: transform var(--transition-fast);
    --transition-opacity: opacity var(--transition-normal);
    /* ============================================
       RESPONSIVE BREAKPOINTS
       ============================================ */
    /* Note: These are for reference in comments.
       Actual media queries should use standard values */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    /* ============================================
       LAYOUT
       ============================================ */
    --max-width-container: 1400px;
    --z-index-header: 2000;
    --z-index-overlay: 2000;
}