:root {
  --dark: #181312;
  --dark-secondary: #2e2927;
  --light: #f3ebe4;
  --light-secondary: #d8cdbc;
  --brand: #fcaa2d;
  --brand-hover: #e69a25;
  --transparent: transparent;

  --dark-70: rgba(24, 19, 18, 0.7);
  --light-70: rgba(243, 235, 228, 0.7);
  --light-8: rgba(243, 235, 228, 0.08);
  --light-16: rgba(243, 235, 228, 0.16);
  --dark-16: rgba(24, 19, 18, 0.16);

  --border-light: rgba(24, 19, 18, 0.12);
  --border-dark: rgba(243, 235, 228, 0.18);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;

  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-theme="light"] {
  --bg: var(--light-secondary);
  --bg-alt: var(--light);
  --text: var(--dark);
  --text-secondary: rgba(24, 19, 18, 0.75);
  --text-muted: rgba(24, 19, 18, 0.55);
  --card-bg: var(--light);
  --card-border: var(--border-light);
  --nav-bg: rgba(216, 205, 188, 0.92);
  --input-bg: rgba(24, 19, 18, 0.04);
}

[data-theme="dark"] {
  --bg: var(--dark);
  --bg-alt: var(--dark-secondary);
  --text: var(--light);
  --text-secondary: rgba(243, 235, 228, 0.75);
  --text-muted: rgba(243, 235, 228, 0.55);
  --card-bg: var(--dark-secondary);
  --card-border: var(--border-dark);
  --nav-bg: rgba(24, 19, 18, 0.92);
  --input-bg: rgba(243, 235, 228, 0.06);
}