:root {
  --dark-primary: #0d0d0f;
  --dark-secondary: #161619;
  --dark-tertiary: #1e1e22;
  --dark-surface: #252529;
  --dark-accent: #c9a962;
  --dark-accent-hover: #d4b872;
  --dark-text-primary: #e8e6e3;
  --dark-text-secondary: #9a9896;
  --dark-text-muted: #5c5a58;
  --dark-border: #2a2a2e;
  --dark-glow: rgba(201, 169, 98, 0.15);
  --dark-success: #4a9f6e;
  --dark-error: #c75b5b;
  --dark-warning: #c9a33d;

  --light-primary: #faf9f7;
  --light-secondary: #ffffff;
  --light-tertiary: #f0efed;
  --light-surface: #e8e7e5;
  --light-accent: #8b6914;
  --light-accent-hover: #a67c1a;
  --light-text-primary: #1a1a1c;
  --light-text-secondary: #5c5b59;
  --light-text-muted: #9a9997;
  --light-border: #e0dfdd;
  --light-shadow: rgba(0, 0, 0, 0.08);
  --light-success: #2d7a4f;
  --light-error: #b34a4a;
  --light-warning: #9a7a20;

  --bg-primary: var(--dark-primary);
  --bg-secondary: var(--dark-secondary);
  --bg-tertiary: var(--dark-tertiary);
  --bg-surface: var(--dark-surface);
  --accent: var(--dark-accent);
  --accent-hover: var(--dark-accent-hover);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-muted: var(--dark-text-muted);
  --border-color: var(--dark-border);
  --glow: var(--dark-glow);
  --success: var(--dark-success);
  --error: var(--dark-error);
  --warning: var(--dark-warning);
  --shadow: rgba(0, 0, 0, 0.4);

  --fs-display: 4rem;
  --fs-h1: 2.5rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-theme: 300ms;
  --duration-slow: 400ms;

  --shadow-sm: 0 2px 8px var(--shadow);
  --shadow-md: 0 4px 16px var(--shadow);
  --shadow-lg: 0 8px 32px var(--shadow);
  --shadow-xl: 0 16px 48px var(--shadow);

  --glass-bg: rgba(22, 22, 25, 0.7);
  --glass-border: rgba(201, 169, 98, 0.1);
  --glass-blur: blur(20px);
}

[data-theme="light"] {
  --bg-primary: var(--light-primary);
  --bg-secondary: var(--light-secondary);
  --bg-tertiary: var(--light-tertiary);
  --bg-surface: var(--light-surface);
  --accent: var(--light-accent);
  --accent-hover: var(--light-accent-hover);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-muted: var(--light-text-muted);
  --border-color: var(--light-border);
  --glow: rgba(139, 105, 20, 0.12);
  --success: var(--light-success);
  --error: var(--light-error);
  --warning: var(--light-warning);
  --shadow: var(--light-shadow);

  --glass-bg: rgba(250, 249, 247, 0.8);
  --glass-border: rgba(139, 105, 20, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition:
    background-color var(--duration-theme) var(--ease-smooth),
    color var(--duration-theme) var(--ease-smooth);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}