/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require theme
 *= require_tree .
 *= require_self
 */

/* Remove the @import since it's already included via require_tree . */

/* Theme variables and utility classes */
:root {
  /* Primary theme colors */
  --theme-hue: 150;
  --theme-saturation: 25%;
  --theme-lightness: 25%;
  
  /* Secondary colors */
  --theme-secondary-hue: 150;
  --theme-secondary-saturation: 20%;
  --theme-secondary-lightness: 40%;
  
  /* Accent colors */
  --theme-accent-hue: 35;
  --theme-accent-saturation: 25%;
  --theme-accent-lightness: 65%;
  
  /* Background colors */
  --theme-bg-hue: 40;
  --theme-bg-saturation: 15%;
  --theme-bg-lightness: 85%;
}

/* Primary theme colors */
.bg-theme-primary { background-color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }
.text-theme-primary { color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }

/* Secondary colors */
.bg-theme-secondary { background-color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }
.text-theme-secondary { color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }

/* Accent colors */
.bg-theme-accent { background-color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }
.text-theme-accent { color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }

/* Background colors */
.bg-theme-bg { background-color: hsl(var(--theme-bg-hue), var(--theme-bg-saturation), var(--theme-bg-lightness)); }

/* Opacity variants */
.bg-theme-primary\/90 { background-color: hsla(var(--theme-hue), var(--theme-saturation), var(--theme-lightness), 0.9); }
.bg-theme-primary\/10 { background-color: hsla(var(--theme-hue), var(--theme-saturation), var(--theme-lightness), 0.1); }

.bg-theme-secondary\/90 { background-color: hsla(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness), 0.9); }
.bg-theme-secondary\/10 { background-color: hsla(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness), 0.1); }

.bg-theme-accent\/90 { background-color: hsla(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness), 0.9); }
.bg-theme-accent\/10 { background-color: hsla(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness), 0.1); }

/* Hover states */
.hover\:bg-theme-primary:hover { background-color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }
.hover\:bg-theme-secondary:hover { background-color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }
.hover\:bg-theme-accent:hover { background-color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }

.hover\:text-theme-primary:hover { color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }
.hover\:text-theme-secondary:hover { color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }
.hover\:text-theme-accent:hover { color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }

/* Border colors */
.border-theme-primary { border-color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }
.border-theme-secondary { border-color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }
.border-theme-accent { border-color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }

/* Ring colors */
.ring-theme-primary { --tw-ring-color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness)); }
.ring-theme-secondary { --tw-ring-color: hsl(var(--theme-secondary-hue), var(--theme-secondary-saturation), var(--theme-secondary-lightness)); }
.ring-theme-accent { --tw-ring-color: hsl(var(--theme-accent-hue), var(--theme-accent-saturation), var(--theme-accent-lightness)); }

/* Transitions */
.transition-theme {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Dark mode overrides */
.dark .dark\:text-white { color: white; }
.dark .dark\:text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.dark .dark\:text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.dark .dark\:text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.dark .dark\:text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.dark .dark\:text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.dark .dark\:text-white\/40 { color: rgba(255, 255, 255, 0.4); }

.dark .dark\:bg-black { background-color: black; }
.dark .dark\:bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); }
.dark .dark\:bg-black\/80 { background-color: rgba(0, 0, 0, 0.8); }
.dark .dark\:bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
.dark .dark\:bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.dark .dark\:bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.dark .dark\:bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }

.dark .dark\:border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.dark .dark\:border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

.dark .dark\:hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.dark .dark\:hover\:text-white:hover { color: white; }

/* Content area background and text colors */
.content-area {
  background-color: hsl(var(--theme-bg-hue), var(--theme-bg-saturation), var(--theme-bg-lightness));
  color: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-lightness));
}

.dark .content-area {
  background-color: hsl(var(--theme-bg-hue), var(--theme-bg-saturation), calc(var(--theme-bg-lightness) * 0.15));
  color: hsl(var(--theme-hue), calc(var(--theme-saturation) * 0.8), calc(100% - var(--theme-lightness)));
}