:root {
  --is-dark: 1; /* Or --is-dark: 1 if it's a dark theme */
  
  /* Primary color variants (from darkest to lightest) */
  --primary: #71b737;
  --primary-700: #5a9228;
  --primary-650: #62a02d;
  --primary-600: #69ad32;
  --primary-550: #71b737;
  --primary-500: #7ec245;
  --primary-450: #8bc954;
  --primary-400: #98d063;
  --primary-350: #a5d772;
  --primary-300: #b2de81;
  --primary-250: #bfe590;
  --primary-200: #ccec9f;
  --primary-150: #5a9228;
  --primary-100: #e6fabd;
  --primary-50: #f3fde6;
  
  --border-primary: #71b737;
  --border-secondary: hsl(0, 0%, 32%);
  
  /* Base colors */
  --bg: hsl(0, 0%, 12%);
  --fg: hsl(0, 0%, 100%);
  --fg-400: hsl(0, 0%, 95%);
  --fg-350: hsl(0, 0%, 90%);
  --fg-300: hsl(0, 0%, 85%);
  --fg-250: hsl(0, 0%, 85%);
  --fg-200: hsl(0, 0%, 85%);
  --fg-100: hsl(0, 0%, 75%);
  
  /* Icon colors */
  --icon-bg: hsl(0, 0%, 100%);
  --active-icon-color: #ffffff;
  --secondary-icon-color: hsl(221, 59%, 61%);
  
  /* On-primary colors (text/icons on primary background) */
  --on-primary: hsl(0, 0%, 100%);
  --on-primary-700: hsl(0, 0%, 100%);
  --on-primary-650: hsl(0, 0%, 100%);
  --on-primary-600: hsl(0, 0%, 100%);
  --on-primary-550: hsl(0, 0%, 100%);
  --on-primary-500: hsl(0, 0%, 100%);
  --on-primary-450: hsl(0, 0%, 98%);
  --on-primary-400: hsl(0, 0%, 20%);
  --on-primary-350: hsl(0, 0%, 18%);
  --on-primary-300: hsl(0, 0%, 16%);
  --on-primary-250: hsl(0, 0%, 14%);
  --on-primary-200: hsl(0, 0%, 12%);
  --on-primary-150: hsl(0, 0%, 10%);
  --on-primary-100: hsl(0, 0%, 8%);
  --on-primary-50: hsl(0, 0%, 6%);
  
  /* Alert colors */
  --alert-primary-fg: var(--on-primary);
  --alert-primary-bg: #ca8047;
  --alert-primary-border-color: #cd9e7a;

  /* Header */
  --header-bg: var(--bg);
  --header-fg: hsl(0, 0%, 90%);
  
  /* Secondary background */
  --bg-secondary: hsl(0, 0%, 22%);
  --bg-secondary-50: hsl(0, 0%, 12%);
  --bg-secondary-100: hsl(0, 0%, 17%);
  --bg-secondary-150: hsl(0, 0%, 22%);
  --bg-secondary-200: hsl(0, 0%, 22%);
  --bg-secondary-250: hsl(0, 0%, 22%);
  --bg-secondary-300: hsl(0, 0%, 22%);
  --bg-secondary-350: hsl(0, 0%, 27%);
  --bg-secondary-400: hsl(0, 0%, 32%);
  --bg-secondary-450: hsl(0, 0%, 37%);
  --bg-secondary-500: hsl(0, 0%, 42%);
  --bg-secondary-550: hsl(0, 0%, 47%);
  --bg-secondary-600: hsl(0, 0%, 52%);
  /* Menu colors */
  --menu-fg: hsl(0, 0%, 90%);
  --menu-fg-600: hsl(0, 0%, 60%);
  --menu-fg-550: hsl(0, 0%, 65%);
  --menu-fg-500: hsl(0, 0%, 70%);
  --menu-fg-450: hsl(0, 0%, 75%);
  --menu-fg-400: hsl(0, 0%, 80%);
  --menu-fg-350: hsl(0, 0%, 82%);
  --menu-fg-300: hsl(0, 0%, 84%);
  --menu-fg-250: hsl(0, 0%, 86%);
  --menu-fg-200: hsl(0, 0%, 88%);
  --menu-fg-150: hsl(0, 0%, 90%);
  --menu-fg-100: hsl(0, 0%, 92%);
  --menu-fg-50: hsl(0, 0%, 94%);
  
  --menu-bg: hsl(0, 0%, 22%);
  --menu-bg-600: hsl(0, 0%, 18%);
  --menu-bg-550: hsl(0, 0%, 19%);
  --menu-bg-500: hsl(0, 0%, 20%);
  --menu-bg-450: hsl(0, 0%, 21%);
  --menu-bg-400: hsl(0, 0%, 24%);
  --menu-bg-350: hsl(0, 0%, 26%);
  --menu-bg-300: hsl(0, 0%, 28%);
  --menu-bg-250: hsl(0, 0%, 30%);
  --menu-bg-200: hsl(0, 0%, 32%);
  
  /* Input fields */
  --input-fg: hsl(0, 0%, 95%);
  --input-bg: hsl(0, 0%, 18%);
  --input-bg-550: hsl(0, 0%, 20%);
  --input-bg-600: hsl(0, 0%, 16%);
  --input-bg-in-secondary: hsl(0, 0%, 16%);
  --input-bg-in-modal: hsl(0, 0%, 18%);
  --input-danger-fg: #ff6b6b;
  --input-danger-bg: rgba(255, 107, 107, 0.1);
  --input-placeholder-color: hsl(0, 0%, 55%);
  --input-border-color: hsl(0, 0%, 32%);
  --input-check-active-fg: #ffffff;
  --input-check-active-bg: var(--primary);
  --input-placeholder-color: var(--menu-fg-600);
  
  /* Textarea */
  --textarea-fg: hsl(0, 0%, 95%);
  --textarea-bg: hsl(0, 0%, 18%);
  --textarea-bg-in-secondary: hsl(0, 0%, 16%);
  --textarea-bg-in-modal: hsl(0, 0%, 18%);
  --textarea-placeholder-color: var(--menu-fg-600);
  
  /* Support button */
  --support-btn-bg: var(--primary);
  --support-btn-fg: #ffffff;
  --support-btn-heart-bg: #e74c3c;

  /* PrimeNG Select components */
  --p-select-focus-ring-color: var(--secondary-icon-color);
  --p-select-placeholder-color: var(--menu-fg-600);
  --p-multiselect-background: hsl(0, 0%, 18%);
  --p-select-background: hsl(0, 0%, 18%);
  --p-select-border-color: hsl(0, 0%, 32%);
  --p-select-focus-border-color: hsl(0, 0%, 42%);
  --p-select-option-focus-background: var(--primary-400);
  --p-select-option-focus-color: #ffffff;
  --p-select-option-background: var(--bg-secondary-350);
  --p-select-option-color: #ffffff;
  --p-select-overlay-color: hsl(0, 0%, 95%);
  --p-select-overlay-background: hsl(0, 0%, 20%);
  --p-select-overlay-border-color: hsl(0, 0%, 32%);
  --p-select-dropdown-color: hsl(0, 0%, 90%);
  --p-select-option-selected-focus-background: var(--primary-500);
  --p-select-option-selected-focus-color: #ffffff;
  --p-select-option-selected-background: var(--primary);

  --p-datatable-header-background: var(--bg-secondary-350);
  --p-datatable-header-color: var(--fg);
  --p-datatable-header-cell-color: var(--fg);
  --p-datatable-header-cell-background: var(--bg-secondary-300);
  --p-datatable-row-background:var(--bg-secondary-400);
  --p-datatable-row-color: var(--fg);
  --p-datatable-header-cell-selected-color: var(--fg);
  --p-datatable-header-cell-selected-background: var(--bg-secondary-300);
  --p-paginator-background: var(--bg-secondary-450);
  --p-paginator-color: var(--fg);
  --p-paginator-current-page-report-color: var(--fg-350);
  --p-datatable-body-cell-border-color: var(--fg-100);
  --p-paginator-nav-button-selected-background: var(--fg-100);
  --p-paginator-nav-button-selected-color: var(--bg);
}

#custom-css .video-thumbnail .play-overlay .icon::before {
    background-color: hsl(221, 59%, 61%);
}

#custom-css .result-type {
    background-color: var(--primary-500);
}

#custom-css ::selection {
    background-color: var(--primary-700);
}