:root {
    /* Core Brand Colors */
    --gold: #c9a84c; 
    --gold-hover: #e0c268;
    
    /* Dark Mode (Default) */
    --dark: #0d0d0d; 
    --black: #050505;
    --card-bg: #151515;
    --text-main: #e8e6e3;
    --text-muted: #888888;
    --border: #333333;
    --shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Typography */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Light Mode Toggle Override */
body.light-mode {
    --dark: #f8f9fa; 
    --black: #ffffff;
    --card-bg: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #5f5f5f;
    --border: #e0e0e0;
    --shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background: var(--dark); 
    color: var(--text-main); 
    font-family: var(--font-body); 
    transition: background 0.3s ease, color 0.3s ease; 
    line-height: 1.6;
}

h1, h2, h3, h4 { 
    font-family: var(--font-heading); 
    color: var(--gold); 
    letter-spacing: 0.5px; 
}

.container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 24px; 
}

.card { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 16px; 
    padding: 20px; 
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
}

.btn-primary {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--gold-hover);
    box-shadow: 0 5px 15px rgba(201,168,76,0.3);
}

.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--gold);
    color: #000;
}