:root {
  /* Base colors */
  --color-primary: #2563eb;
  --color-primary-hover: #3b82f6;

  /* Background colors */
  --bg-base: #F7F7F7;
  --bg-surface: #FFFFFF;
  --bg-active: #CCCCCC;
  --bg-active-hover: #525252;
  --bg-selected: var(--color-primary);

  /* Gradient colors */
  --gradient-hero-start: #1e3a8a; /* blue-900 */
  --gradient-hero-middle: #1e40af; /* blue-800 */
  --gradient-hero-end: #000000; /* black */
  --gradient-overlay-start: rgb(0 0 0 / 0.8);
  --gradient-overlay-middle: rgb(0 0 0 / 0.5);
  --gradient-overlay-end: #000000; /* black */

  /* Text colors */
  --text-primary: #222222;
  --text-low: #444444;
  --text-muted: #666666;
  --text-placeholder: #d4d4d4;
  --text-link: #165baf;
  --text-link-hover: #93c5fd;
  --text-error: #f87171;

  /* Border colors */
  --border-medium: #CCCCCC;

  /* Hero image */
  --hero-image: url("https://storage.googleapis.com/careersite-463013-assets/customers/shoe-carnival/hero.webp");

  /* Company logo */
  --company-logo: url("https://storage.googleapis.com/careersite-463013-assets/customers/shoe-carnival/logos/shoe-station-group-full.webp");

  /* Contrasting Colors */
  --contrasting-bg: #000000;
  --contrasting-text: #FFFFFF;

  --even: color-mix(in srgb, var(--bg-base) 95%, black);

}