:root {
  /* Primary colors */
  --color-primary: #f2ba0dFF;
  --color-primary-dark: #8a8061;
  --color-text: #171712;

  --color-cta-background: var(--color-primary);
  --color-cta-text: var(--color-text);
  /* 30% darker than primary */
  --color-primary-light: #3d5872;
  /* 30% lighter than primary */
  /* Secondary colors */
  --color-secondary: #33CCCC;
  --color-secondary-dark: #248f8f;
  /* 30% darker than secondary */
  --color-secondary-light: #70dfdf;
  /* 30% lighter than secondary */

  /* Neutral colors */
  --color-background: #f8f9fa;
  --color-text: #202124;
  --color-text-light: #5f6368;

  /* Accent colors */
  --color-accent: #9c854a;
  --color-accent-dark: #c5221f;
  --color-accent-light: #ff6b6b;

  /* UI colors */
  --color-border: #dadce0;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Header colors */
  --color-header-background: var(--color-primary);
  --color-header-text: #f8f9fa;

  /* Page colors */
  --color-page-background: var(--color-background);
  --color-page-text: var(--color-text);

  /* Footer colors */
  --color-footer-background: #212529;
  --color-footer-text: #f8f9fa;

  /* Typography colors */
  --color-link: #0d6efd;
  --color-link-hover: #0a58ca;
  --color-body-text: #212529;

  --color-label: var(--color-primary-light);

  --border-radius: .4rem;
}

:root,
[data-bs-theme="dark"] {
  --color-text: hsl(0, 0%, 11%);
  --color-background: hsl(0, 0%, 96%);
  --color-title: var(--color-primary-light);
}