:root {
    --primary-red: #c41e3a;
    --primary-red-light: #e53e3e;
    --primary-red-dark: #9b1c2c;
    --primary-red-darker: #7a1620;

    --secondary-navy: #1a365d;
    --secondary-navy-light: #2c5282;
    --secondary-navy-dark: #0f2035;
    --secondary-navy-darker: #0a1624;

    --accent-gold: #d69e2e;
    --accent-gold-light: #f6e05e;
    --accent-gold-dark: #b7791f;

    --primary-green: #059669;
    --primary-green-light: #10b981;
    --primary-green-dark: #047857;

    --white: #ffffff;
    --black: #000000;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-600);
    --text-muted: var(--gray-500);
    --text-inverse: var(--white);

    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-overlay-light: rgba(0, 0, 0, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.95);
    --bg-glass-dark: rgba(26, 54, 93, 0.95);

    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);

    --gradient-primary: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-navy) 0%, var(--secondary-navy-light) 100%);
     --gradient-success: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    --gradient-hero: linear-gradient(135deg, var(--secondary-navy-darker) 0%, var(--secondary-navy) 50%, var(--primary-red-dark) 100%);
    --gradient-memorial: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 50%, var(--white) 100%);
    --gradient-memorial-dark: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 50%, var(--gray-700) 100%);
    --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    --gradient-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    --font-primary: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-memorial: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
    --font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;

    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.9375rem;
    --font-size-base: 1.0625rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.25rem;
    --font-size-6xl: 4rem;
    --font-size-7xl: 5rem;
    --font-size-8xl: 6rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-none: 1;
    --line-height-tight: 1.15;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 1.75;
    --line-height-looser: 2;

    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    --letter-spacing-ultra: 0.15em;

    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;

    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-base: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 40px 60px -20px rgba(0, 0, 0, 0.3);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-memorial: 0 8px 32px rgba(196, 30, 58, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-glow-red: 0 0 20px rgba(196, 30, 58, 0.3);
    --shadow-glow-gold: 0 0 20px rgba(214, 158, 46, 0.3);
    --shadow-gold-glow: 0 0 25px rgba(214, 158, 46, 0.4);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    --max-width-xs: 20rem;
    --max-width-sm: 24rem;
    --max-width-md: 28rem;
    --max-width-lg: 32rem;
    --max-width-xl: 36rem;
    --max-width-2xl: 42rem;
    --max-width-3xl: 48rem;
    --max-width-4xl: 56rem;
    --max-width-5xl: 64rem;
    --max-width-6xl: 72rem;
    --max-width-7xl: 80rem;
    --max-width-full: 100%;

    --container-padding: var(--spacing-4);
    --container-padding-mobile: var(--spacing-4);
    --container-padding-tablet: var(--spacing-6);
    --container-padding-desktop: var(--spacing-8);

    --header-height: 80px;
    --header-height-mobile: 64px;

    --focus-ring: 0 0 0 3px rgba(196, 30, 58, 0.2);
    --focus-ring-offset: 2px;
}

[data-theme="dark"] {
    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-muted: var(--gray-500);
    --text-inverse: var(--gray-900);

    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-700);
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --bg-glass: rgba(17, 24, 39, 0.95);

    --border-light: var(--gray-700);
    --border-medium: var(--gray-600);
    --border-dark: var(--gray-500);

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-memorial-dark: 0 8px 32px rgba(196, 30, 58, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }
}

@media (min-width: 640px) {
    :root {
        --container-padding: var(--container-padding-tablet);
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: var(--container-padding-desktop);
    }
}