/* ==============================================================================
   Art Companion — Material 3 Nocturne Gallery Theme Tokens (artcompanion.online)
   ============================================================================== */
:root {
  /* Surfaces & Backgrounds */
  --gallery-bg: #0d1117;
  --gallery-surface: #161b22;
  --gallery-surface-elevated: #21262d;
  --gallery-surface-overlay: rgba(22, 27, 34, 0.85);
  --gallery-surface-glass: rgba(33, 38, 45, 0.7);

  /* Primary & Accent Tiers */
  --gold-primary: #d4af37;
  --gold-light: #ffb74d;
  --gold-container: #3e2723;
  --gold-on-container: #ffe0b2;

  --gallery-blue: #64b5f6;
  --gallery-blue-dark: #1565c0;
  --gallery-blue-container: #0d47a1;

  --botanical-green: #81c784;
  --botanical-container: #1b5e20;

  --crimson-accent: #e53935;
  --crimson-container: #b71c1c;

  /* Text & Border Contrasts */
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --text-gold: #fde68a;

  --border-subtle: rgba(240, 246, 252, 0.1);
  --border-medium: rgba(240, 246, 252, 0.18);
  --border-gold-glow: rgba(212, 175, 55, 0.35);

  /* Typography */
  --font-serif-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-serif-title: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace, monospace;

  /* Radii & Transitions */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-elevation: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 25px rgba(212, 175, 55, 0.18);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--gallery-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--gallery-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

.cinzel { font-family: var(--font-serif-display); }
.playfair { font-family: var(--font-serif-title); }
.mono { font-family: var(--font-mono); }