@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

/* Global CSS Variables and Design Tokens */
:root {
    /* Font Stack */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* Theme Layout Customizations */
    --radius-sm: 0.375rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --header-height: 72px;

    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;

    /* User Requested Color Tokens */
    --red: #C8102E;
    --red-dark: #8B0A1F;
    --cream: #FDF9F4;
    --cream-dark: #FAF5EE;
    --black: #121212;
    --off-black: #1a1a1a;
    --smoke: #242424;
    --wine-dark: #19080a;
    --gold: #C9954C;
    --gold-light: #E8C68A;
    --emerald: #045233;
    --emerald-light: #0d7a4d;
    --text-muted: #666;
    --white: #fff;

    /* Theme Mapping to Design Tokens */
    --background: var(--cream);
    --surface: var(--white);
    --surface-rgb: 255, 255, 255;
    --surface-secondary: var(--cream-dark);
    --foreground: var(--black);
    --foreground-secondary: var(--smoke);
    --muted: var(--text-muted);
    
    --border: #e8e2d5;
    --border-hover: var(--gold-light);

    --primary: var(--red);
    --primary-hover: var(--red-dark);
    --primary-light: rgba(200, 16, 46, 0.06);
    --primary-dark: var(--red-dark);

    --secondary: var(--emerald);
    --secondary-hover: var(--emerald-light);
    --secondary-light: rgba(4, 82, 51, 0.06);

    --accent: var(--gold);
    --accent-hover: var(--gold-light);
    --accent-light: rgba(201, 149, 76, 0.06);

    --success: var(--emerald);
    --success-light: rgba(4, 82, 51, 0.08);

    --warning: var(--gold);
    --warning-light: rgba(201, 149, 76, 0.08);

    --danger: var(--red);
    --danger-light: rgba(200, 16, 46, 0.08);

    --gradient-primary: linear-gradient(135deg, var(--red) 0%, var(--gold) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--emerald) 0%, var(--gold) 100%);
    --gradient-accent: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 20px -2px rgba(201, 149, 76, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 25px -5px rgba(201, 149, 76, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 35px -10px rgba(201, 149, 76, 0.12), 0 10px 15px -8px rgba(0, 0, 0, 0.06);
}