/* ======== SCHEER - CSS Variables ======== */

:root {
    /* ======== Brand Colors ======== */
    --color-gold: #a7915d;
    --color-gold-light: #c9b883;
    --color-gold-hover: #c4a86a;

    /* ======== Background Colors ======== */
    --color-bg-dark: #0a0a0a;
    --color-bg-darker: #050505;
    --color-bg-card: #0f0f0f;
    --color-bg-elevated: #1a1a1a;

    /* ======== Text Colors ======== */
    --color-text-primary: #f5f5f0;
    --color-text-secondary: #c9c9c4;
    --color-text-muted: #888888;

    /* ======== Transparency - Gold ======== */
    --color-gold-10: rgba(167, 145, 93, 0.1);
    --color-gold-15: rgba(167, 145, 93, 0.15);
    --color-gold-20: rgba(167, 145, 93, 0.2);
    --color-gold-30: rgba(167, 145, 93, 0.3);
    --color-gold-40: rgba(167, 145, 93, 0.4);
    --color-gold-50: rgba(167, 145, 93, 0.5);
    --color-gold-60: rgba(167, 145, 93, 0.6);

    /* ======== Transparency - Text ======== */
    --color-text-70: rgba(245, 245, 240, 0.7);
    --color-text-60: rgba(245, 245, 240, 0.6);
    --color-text-50: rgba(245, 245, 240, 0.5);
    --color-text-40: rgba(245, 245, 240, 0.4);
    --color-text-30: rgba(245, 245, 240, 0.3);

    /* ======== Transparency - Black ======== */
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-70: rgba(0, 0, 0, 0.7);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-30: rgba(0, 0, 0, 0.3);

    /* ======== Typography ======== */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Raleway', sans-serif;

    /* ======== Spacing Scale ======== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* ======== Transitions ======== */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ======== Borders ======== */
    --border-gold: 1px solid var(--color-gold);
    --border-gold-subtle: 1px solid var(--color-gold-30);
    --border-gold-faint: 1px solid var(--color-gold-15);

    /* ======== Shadows ======== */
    --shadow-gold: 0 0 30px rgba(167, 145, 93, 0.3);
    --shadow-gold-strong: 0 0 50px rgba(167, 145, 93, 0.4);
    --shadow-dark: 0 10px 40px rgba(0, 0, 0, 0.5);
}