:root {
  /* Core color variations */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 97% 0.005 96;
  --lch-gray-dark: 87% 0.005 96;
  --lch-gray-darker: 80% 0.005 96;
  --lch-blue: 53.51% 0.1987 258.07;
  --lch-sky-blue: 85% 0.08 220;
  --lch-sky-blue-dark: 45% 0.12 220;
  --lch-purple: 62% 0.22 290;
  --lch-always-black: 0% 0 0;
  
  /* Avatar colors */
  --lch-avatar-purple: 68% 0.20 290;
  --lch-avatar-blue: 68% 0.18 250;
  --lch-avatar-teal: 68% 0.15 180;
  --lch-avatar-green: 68% 0.18 140;
  --lch-avatar-orange: 70% 0.18 50;
  --lch-avatar-pink: 68% 0.20 340;
  --lch-avatar-red: 68% 0.20 20;
  --lch-avatar-indigo: 65% 0.22 270;
  --avatar-placeholder-bg: aquamarine;

  /* elements */
  --color-bg: oklch(var(--lch-white));
  --color-text: oklch(var(--lch-black));
  --color-text-reversed: oklch(var(--lch-white));
  --color-border: oklch(var(--lch-gray));
  --color-border-dark: oklch(var(--lch-gray-dark));
  --color-border-darker: oklch(var(--lch-gray-darker));
  --color-link: oklch(var(--lch-blue));
  --color-sky-blue: oklch(var(--lch-sky-blue));
  --color-sky-blue-dark: oklch(var(--lch-sky-blue-dark));
  --color-purple: oklch(var(--lch-purple));
  
  /* Avatar color variables */
  --color-avatar-purple: oklch(var(--lch-avatar-purple));
  --color-avatar-blue: oklch(var(--lch-avatar-blue));
  --color-avatar-teal: oklch(var(--lch-avatar-teal));
  --color-avatar-green: oklch(var(--lch-avatar-green));
  --color-avatar-orange: oklch(var(--lch-avatar-orange));
  --color-avatar-pink: oklch(var(--lch-avatar-pink));
  --color-avatar-red: oklch(var(--lch-avatar-red));
  --color-avatar-indigo: oklch(var(--lch-avatar-indigo));

  /* Redefine colors for dark mode */
  @media (prefers-color-scheme: dark) {
    --lch-black: 100% 0 0;
    --lch-white: 0.3015 0.0236 253.64;
    /* --lch-white: 12.8% 0.044 263; */
    --lch-gray: 23.4% 0 0;
    --lch-gray-dark: 28% 0 0;
    --lch-gray-darker: 43% 0 0;
  }
}

body[data-theme="denim"] {
  --theme-accent: oklch(var(--lch-blue));
  --color-link: var(--theme-accent);
  --color-primary: var(--theme-accent);
  --color-primary-dark: color-mix(in oklch, var(--theme-accent) 85%, oklch(var(--lch-black)));
  --color-selected: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
  --color-selected-dark: color-mix(in oklch, var(--theme-accent) 30%, oklch(var(--lch-white)));
  --input-focus-border-color: oklch(var(--lch-blue));
  --input-focus-shadow-color: color-mix(in oklch, oklch(var(--lch-blue)) 25%, transparent);
  --input-autofill-background: color-mix(in oklch, oklch(var(--lch-blue)) 15%, oklch(var(--lch-white)));
}

body[data-theme="sage"] {
  --theme-accent: oklch(var(--lch-avatar-green));
  --color-link: var(--theme-accent);
  --color-primary: var(--theme-accent);
  --color-primary-dark: color-mix(in oklch, var(--theme-accent) 85%, oklch(var(--lch-black)));
  --color-selected: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
  --color-selected-dark: color-mix(in oklch, var(--theme-accent) 30%, oklch(var(--lch-white)));
  --input-focus-border-color: color-mix(in oklch, var(--theme-accent) 70%, oklch(var(--lch-white)));
  --input-focus-shadow-color: color-mix(in oklch, var(--theme-accent) 25%, transparent);
  --input-autofill-background: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
}

body[data-theme="citrus"] {
  --theme-accent: oklch(var(--lch-avatar-orange));
  --color-link: var(--theme-accent);
  --color-primary: var(--theme-accent);
  --color-primary-dark: color-mix(in oklch, var(--theme-accent) 85%, oklch(var(--lch-black)));
  --color-selected: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
  --color-selected-dark: color-mix(in oklch, var(--theme-accent) 30%, oklch(var(--lch-white)));
  --input-focus-border-color: color-mix(in oklch, var(--theme-accent) 70%, oklch(var(--lch-white)));
  --input-focus-shadow-color: color-mix(in oklch, var(--theme-accent) 25%, transparent);
  --input-autofill-background: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
}

body[data-theme="lavender"] {
  --theme-accent: oklch(var(--lch-avatar-purple));
  --color-link: var(--theme-accent);
  --color-primary: var(--theme-accent);
  --color-primary-dark: color-mix(in oklch, var(--theme-accent) 85%, oklch(var(--lch-black)));
  --color-selected: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
  --color-selected-dark: color-mix(in oklch, var(--theme-accent) 30%, oklch(var(--lch-white)));
  --input-focus-border-color: color-mix(in oklch, var(--theme-accent) 70%, oklch(var(--lch-white)));
  --input-focus-shadow-color: color-mix(in oklch, var(--theme-accent) 25%, transparent);
  --input-autofill-background: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
}

body[data-theme="sky"] {
  --theme-accent: oklch(var(--lch-sky-blue));
  --color-link: var(--theme-accent);
  --color-primary: var(--theme-accent);
  --color-primary-dark: color-mix(in oklch, var(--theme-accent) 85%, oklch(var(--lch-black)));
  --color-selected: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
  --color-selected-dark: color-mix(in oklch, var(--theme-accent) 30%, oklch(var(--lch-white)));
  --input-focus-border-color: color-mix(in oklch, var(--theme-accent) 70%, oklch(var(--lch-white)));
  --input-focus-shadow-color: color-mix(in oklch, var(--theme-accent) 25%, transparent);
  --input-autofill-background: color-mix(in oklch, var(--theme-accent) 15%, oklch(var(--lch-white)));
}