/* CSS Variables */
:root {
  --bg-dark:        #111111;
  --bg-light:       #FFFFFF;
  --bg-soft:        #F7F7F7;
  --accent:         #C8881A;
  --accent-dark:    #A0660D;
  --accent-light:   #E8A830;
  --text-primary:   #1A1A1A;
  --text-secondary: #666666;
  --text-on-dark:   #FFFFFF;
  --text-muted:     #AAAAAA;
  --border:         #E0E0E0;
  --shadow:         rgba(0,0,0,0.12);
  --radius-card:    8px;
  --radius-btn:     4px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-light);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.navbar { transition: all 0.3s ease; }
.navbar.scrolled { box-shadow: 0 4px 6px -1px var(--shadow); border-bottom: 1px solid var(--border); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); }
.nav-link.active-nav { color: var(--accent); border-bottom: 2px solid var(--accent); }

.tbtn.active { background-color: var(--bg-dark); color: var(--text-on-dark); border-color: var(--bg-dark); }