:root {
  --clr-primary: #689886;
  --clr-primary-hover: #5a8070;
  --clr-primary-light: #e8f5ef;
  --clr-gold: #DDA651;
  --clr-gold-hover: #c9974a;
  --clr-accent-bg: #EEF2FF;
  --clr-accent-text: #3730a3;
  --clr-highlight: #DDA651;
  --clr-highlight-hover: #c9974a;
  --bg-page: #f8f9fb;
  --bg-white: #ffffff;
  --bg-light: #f3f4f6;
  --bg-lighter: #f9fafb;
  --bg-dark: #182131;
  --bg-surface: #1B2335;
  --bg-nav: #485361;
  --bg-nav-hover: #3a4252;
  --border-light: #e5e7eb;
  --border-default: #d1d5db;
  --border-input: #d1d5db;
  --text-primary: #333333;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --text-white: #ffffff;
  --text-dark: #1f2937;
  --color-primary: var(--clr-primary);
  --color-primary-hover: var(--clr-primary-hover);
  --color-gold: var(--clr-gold);
  --color-gold-hover: var(--clr-gold-hover);
  --color-highlight: var(--clr-highlight);
  --color-highlight-hover: var(--clr-highlight-hover);

  --color-dark: var(--bg-dark);
  --color-surface: var(--bg-surface);
  --color-back: var(--bg-nav);
  --color-info-bg: var(--clr-accent-bg);
  --color-info-text: var(--clr-accent-text);
}