/* app/assets/stylesheets/themes.css */

/* 1. Define base variables */
:root {
  --background-color: #eaffe8; /* green-200 */
  --text-color: #333333;       /* Default text color */
  --primary-color: #3b82f6;   /* Default primary color (blue) */

  /* Derived colors for consistent UI */
  --text-muted: color-mix(in srgb, var(--text-color) 70%, transparent);
  --hover-bg: color-mix(in srgb, var(--text-color) 8%, transparent);
  --border-color: color-mix(in srgb, var(--text-color) 15%, transparent);

  /* Navigation colors */
  --nav-bg: #ffffff; /* Navigation background - darker than body */
  --nav-text: color-mix(in srgb, var(--text-color) 70%, transparent);
  --nav-text-hover: var(--text-color);
  --nav-bg-hover: var(--hover-bg);
  --nav-active-text: var(--primary-color);
  --nav-active-bg: color-mix(in srgb, var(--primary-color) 10%, transparent);

  /* Mobile navigation colors */
  --nav-mobile-text: color-mix(in srgb, var(--text-color) 60%, transparent);
  --nav-mobile-text-hover: var(--primary-color);
  --nav-mobile-active-text: var(--primary-color);

  /* Card colors */
  --card-bg: #f8fafc; /* slate-50 */
  --card-text: var(--text-color);
  --card-title-bg: color-mix(in srgb, var(--text-color) 5%, transparent);
  --card-border: var(--border-color);
  --card-shadow: rgba(0, 0, 0, 0.1);

  /* Input colors (slightly lighter than card) */
  --input-bg: #ffffff; /* white - lighter than card-bg */

  /* Button colors */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-text: #ffffff;
  --btn-primary-hover: color-mix(in srgb, var(--primary-color) 90%, black);

  --btn-delete-bg: #dc3545;
  --btn-delete-text: #ffffff;
  --btn-delete-hover: #c82333;

  --btn-archive-bg: #fd7e14;
  --btn-archive-text: #ffffff;
  --btn-archive-hover: #e8590c;

  --btn-edit-bg: #0d6efd;
  --btn-edit-text: #ffffff;
  --btn-edit-hover: #0b5ed7;

  --btn-default-bg: #6c757d;
  --btn-default-text: #ffffff;
  --btn-default-hover: #5a6268;

  /* Participant button gradient colors */
  --participant-btn-bg-start: #e2e8f0;    /* Light gradient base */
  --participant-btn-bg-mid: #e2e8f0;      /* Light gradient mid */
  --participant-btn-color-stop: 90%;      /* Where participant color begins */
  --participant-btn-selected: #10b981;    /* Selected state accent (emerald-600) */

  /* Link colors */
  --link-color: var(--primary-color);
  --link-hover: color-mix(in srgb, var(--primary-color) 80%, black);
  --link-visited: color-mix(in srgb, var(--primary-color) 90%, purple);

  /* Accent colors for statistics cards (bright & colorful) */
  --accent-1-color: #3b82f6;      /* Bright Blue */
  --accent-2-color: #a855f7;      /* Bright Purple */
  --accent-3-color: #10b981;      /* Bright Green */
  --accent-4-color: #f59e0b;      /* Bright Amber */

  /* Accent text color for highlighted values */
  --accent-text-color: #059669;   /* Emerald green for points/values */

  /* Statistics Card colors */
  --stats-card-bg: color-mix(in srgb, var(--primary-color) 5%, var(--background-color));
  --stats-card-text: var(--text-color);
  --stats-card-value: var(--primary-color);
  --stats-card-border: color-mix(in srgb, var(--primary-color) 20%, transparent);

  /* Token Count Display colors */
  --token-display-bg: color-mix(in srgb, var(--accent-4-color) 10%, var(--card-bg));
  --token-display-text: var(--text-color);
  --token-display-value: var(--accent-4-color);
  --token-display-border: color-mix(in srgb, var(--accent-4-color) 25%, transparent);
  --token-display-icon: var(--accent-4-color);
}

/* 2. Light Theme */
html[data-theme='light'] {
  --background-color: #eaffe8; /* green-200 */
  --text-color: #212529;
  --primary-color: #0d6efd;
  --nav-bg: #ffffff;
  --card-bg: #f8fafc; /* slate-50 */
  --input-bg: #ffffff; /* white - lighter than card-bg */

  /* Participant button colors */
  --participant-btn-bg-start: #e2e8f0;  /* slate-200 */
  --participant-btn-bg-mid: #e2e8f0;
  --participant-btn-color-stop: 90%;
  --participant-btn-selected: #10b981;  /* emerald-600 */
}

/* 3. Dark Theme */
html[data-theme='dark'] {
  --background-color: #475569; /* slate-600 */
  --text-color: #f8f9fa; /* white */
  --primary-color: #0d6efd;
  --border-color: #334155; /* slate-700 */

  /* Card colors */
  --card-bg: #334155; /* slate-700 */
  --card-text: #f8f9fa;
  --card-title-bg: rgba(71, 85, 105, 0.5); /* slate-600/50 */
  --card-border: #475569; /* slate-600 */
  --card-shadow: rgba(0, 0, 0, 0.3);

  /* Input colors (slightly lighter than card) */
  --input-bg: #3d4d63; /* lighter than slate-700 */

  /* Button colors */
  --btn-delete-bg: #ef4444;
  --btn-delete-hover: #dc2626;

  --btn-archive-bg: #f97316;
  --btn-archive-hover: #ea580c;

  --btn-edit-bg: #3b82f6;
  --btn-edit-hover: #2563eb;

  /* Navigation background */
  --nav-bg: #1e293b; /* slate-800 - darker than background */

  /* Link colors */
  --link-color: #60a5fa;
  --link-hover: #93c5fd;
  --link-visited: #a78bfa;

  /* Accent colors (brighter for dark backgrounds) */
  --accent-1-color: #60a5fa;      /* Lighter Blue */
  --accent-2-color: #c084fc;      /* Lighter Purple */
  --accent-3-color: #34d399;      /* Lighter Green */
  --accent-4-color: #fbbf24;      /* Lighter Amber */

  /* Accent text color */
  --accent-text-color: #10b981;   /* Bright green for dark theme */

  /* Participant button colors */
  --participant-btn-bg-start: #64748b;  /* slate-500 */
  --participant-btn-bg-mid: #64748b;
  --participant-btn-color-stop: 90%;
  --participant-btn-selected: #34d399;  /* emerald-400 - lighter for visibility on dark */
}

/* 4. Blue Theme */
html[data-theme='blue'] {
  --background-color: #f0faff; /* lighter blue background */
  --text-color: #003366;
  --primary-color: #007bff;
  --nav-bg: #cef0ff; /* darker blue for navbar */

  /* Card colors */
  --card-bg: #e0f7ff;
  --card-text: #003366;
  --card-title-bg: #cef0ff;
  --card-border: #b3e5ff;
  --card-shadow: rgba(0, 123, 255, 0.15);

  /* Input colors (slightly lighter than card) */
  --input-bg: #f0fbff; /* lighter than card-bg */

  /* Button colors */
  --btn-delete-bg: #cc0000;
  --btn-delete-hover: #990000;

  --btn-archive-bg: #ff8c00;
  --btn-archive-hover: #cc7000;

  --btn-edit-bg: #0066cc;
  --btn-edit-hover: #004d99;

  /* Link colors */
  --link-color: #0056b3;
  --link-hover: #003d82;
  --link-visited: #551a8b;

  /* Accent colors (vibrant for blue theme) */
  --accent-1-color: #0284c7;      /* Sky Blue */
  --accent-2-color: #7c3aed;      /* Violet */
  --accent-3-color: #059669;      /* Emerald */
  --accent-4-color: #d97706;      /* Orange */

  /* Accent text color */
  --accent-text-color: #047857;   /* Dark emerald for blue theme */

  /* Participant button colors */
  --participant-btn-bg-start: #aae0ff;  /* light cyan - matches blue theme */
  --participant-btn-bg-mid: #aae0ff;
  --participant-btn-color-stop: 90%;
  --participant-btn-selected: #0284c7;  /* sky-600 - matches accent-1 */
}

/* 5. Purple Theme */
html[data-theme='purple'] {
    --background-color: #2a1540; /* lighter purple background */
    --text-color: #d7c2e6;
    --primary-color: #a74fff;
    --nav-bg: #1c0b2b; /* darker purple for navbar */

    /* Card colors */
    --card-bg: #3d1f5c;
    --card-text: #d7c2e6;
    --card-title-bg: #512878;
    --card-border: #663399;
    --card-shadow: rgba(167, 79, 255, 0.2);

    /* Input colors (slightly lighter than card) */
    --input-bg: #4a2870; /* lighter than card-bg */

    /* Button colors */
    --btn-delete-bg: #d946ef;
    --btn-delete-hover: #c026d3;

    --btn-archive-bg: #f97316;
    --btn-archive-hover: #ea580c;

    --btn-edit-bg: #a74fff;
    --btn-edit-hover: #8e3fe6;

    /* Link colors */
    --link-color: #c084fc;
    --link-hover: #e9d5ff;
    --link-visited: #f0abfc;

    /* Accent colors (vibrant purple theme) */
    --accent-1-color: #8b5cf6;      /* Purple */
    --accent-2-color: #ec4899;      /* Pink */
    --accent-3-color: #14b8a6;      /* Teal */
    --accent-4-color: #f59e0b;      /* Amber */

    /* Accent text color */
    --accent-text-color: #2dd4bf;   /* Bright teal for purple theme */

    /* Participant button colors */
    --participant-btn-bg-start: #5c2a96;  /* purple - matches input-bg */
    --participant-btn-bg-mid: #5c2a96;
    --participant-btn-color-stop: 90%;
    --participant-btn-selected: #8b5cf6;  /* violet-500 - matches accent-1 */
}

/* Apply background and text color to html and body */
html, body {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* 6. Utility classes for theme-aware components */

/* Base utilities */
.nav-bg {
  background-color: var(--nav-bg) !important;
}
.theme-text {
  color: var(--text-color);
}
.theme-text-muted {
  color: var(--text-muted);
}
.theme-border {
  border-color: var(--border-color);
}
.theme-primary {
  color: var(--primary-color);
}

/* Interactive state utilities */
.theme-hover:hover {
  color: var(--text-color);
  background-color: var(--hover-bg);
}

.theme-hover-primary:hover {
  color: var(--primary-color);
}

.theme-active {
  color: var(--nav-active-text);
  background-color: var(--nav-active-bg);
}

/* Combination utilities */
.theme-link {
  color: var(--nav-text);
  transition: all 0.2s ease;
}

.theme-link:hover:not(.active) {
  color: var(--nav-text-hover);
  background-color: var(--nav-bg-hover);
}

.theme-link.active {
  color: var(--nav-active-text);
  background-color: var(--nav-active-bg);
}

/* Mobile variant (modifier class) */
.mobile.theme-link {
  color: var(--nav-mobile-text);
  background-color: transparent;
}

.mobile.theme-link:hover:not(.active) {
  color: var(--nav-mobile-text-hover);
  background-color: transparent;
}

.mobile.theme-link.active {
  color: var(--nav-mobile-active-text);
  background-color: transparent;
}

/* Card utilities */
.theme-card {
  background-color: var(--card-bg) !important;
  color: var(--card-text) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 1px 3px var(--card-shadow) !important;
}

.theme-card-title {
  background-color: var(--card-title-bg) !important;
  color: var(--card-text) !important;
}

/* Secondary background for inner card sections */
.theme-card-inner {
  background-color: color-mix(in srgb, var(--card-bg) 95%, var(--text-color) 5%) !important;
  color: var(--card-text) !important;
}

/* Input utilities */
.input-background {
  background-color: var(--input-bg) !important;
  color: var(--card-text) !important;
}

.theme-input {
  border-color: var(--border-color) !important;
  background-color: var(--input-bg) !important;
  color: var(--text-color) !important;
}

.theme-input:focus {
  --tw-ring-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Button utilities */
.theme-btn {
  transition: all 0.2s ease;
}

.theme-btn-secondary {
  background-color: color-mix(in srgb, var(--card-bg) 70%, transparent) !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease;
}

.theme-btn-secondary:hover {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.theme-btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

.theme-btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
}

.theme-btn-delete {
  background-color: var(--btn-delete-bg) !important;
  color: var(--btn-delete-text) !important;
}

.theme-btn-delete:hover {
  background-color: var(--btn-delete-hover) !important;
}

.theme-btn-archive {
  background-color: var(--btn-archive-bg) !important;
  color: var(--btn-archive-text) !important;
}

.theme-btn-archive:hover {
  background-color: var(--btn-archive-hover) !important;
}

.theme-btn-edit {
  background-color: var(--btn-edit-bg) !important;
  color: var(--btn-edit-text) !important;
}

.theme-btn-edit:hover {
  background-color: var(--btn-edit-hover) !important;
}

.theme-btn-default {
  background-color: var(--btn-default-bg) !important;
  color: var(--btn-default-text) !important;
}

.theme-btn-default:hover {
  background-color: var(--btn-default-hover) !important;
}

.theme-btn-primary-disabled {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 50%, transparent) !important;
  color: var(--btn-primary-text) !important;
  cursor: not-allowed !important;
}

.theme-btn-default-disabled {
  background-color: color-mix(in srgb, var(--btn-default-bg) 50%, transparent) !important;
  color: var(--btn-default-text) !important;
  cursor: not-allowed !important;
}

/* Link utilities */
.theme-a {
  color: var(--link-color);
  transition: color 0.2s ease;
}

.theme-a:hover {
  color: var(--link-hover);
}



/* Statistics Card utilities */
.statistics-card-theme {
  background-color: var(--stats-card-bg) !important;
  color: var(--stats-card-text) !important;
  border-color: var(--stats-card-border) !important;
}

/* Statistics Card with Accent colors */
.statistics-card-accent-1 {
  background-color: color-mix(in srgb, var(--accent-1-color) 10%, var(--background-color)) !important;
  border-color: color-mix(in srgb, var(--accent-1-color) 30%, transparent) !important;
}

.statistics-card-accent-1 .stat-value {
  color: var(--accent-1-color) !important;
}

.statistics-card-accent-2 {
  background-color: color-mix(in srgb, var(--accent-2-color) 10%, var(--background-color)) !important;
  border-color: color-mix(in srgb, var(--accent-2-color) 30%, transparent) !important;
}

.statistics-card-accent-2 .stat-value {
  color: var(--accent-2-color) !important;
}

.statistics-card-accent-3 {
  background-color: color-mix(in srgb, var(--accent-3-color) 10%, var(--background-color)) !important;
  border-color: color-mix(in srgb, var(--accent-3-color) 30%, transparent) !important;
}

.statistics-card-accent-3 .stat-value {
  color: var(--accent-3-color) !important;
}

.statistics-card-accent-4 {
  background-color: color-mix(in srgb, var(--accent-4-color) 10%, var(--background-color)) !important;
  border-color: color-mix(in srgb, var(--accent-4-color) 30%, transparent) !important;
}

.statistics-card-accent-4 .stat-value {
  color: var(--accent-4-color) !important;
}

/* Accent text utility */
.accent-text {
  color: var(--accent-text-color) !important;
}

/* Info/Help box utility */
.theme-info-box {
  background-color: color-mix(in srgb, var(--primary-color) 8%, var(--background-color)) !important;
  border-color: color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
  color: var(--text-color) !important;
}

.theme-info-box-title {
  color: color-mix(in srgb, var(--text-color) 85%, var(--primary-color) 15%) !important;
}

.theme-info-box-text {
  color: color-mix(in srgb, var(--text-color) 90%, var(--primary-color) 10%) !important;
}

.theme-info-box-icon {
  color: var(--primary-color) !important;
}

.theme-info-box-button {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  transition: background-color 0.2s ease;
}

.theme-info-box-button:hover {
  background-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
}

.theme-info-box-checkbox {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent) !important;
  color: var(--primary-color) !important;
}

.theme-info-box-checkbox:focus {
  --tw-ring-color: var(--primary-color) !important;
}

/* Error box utility */
.theme-error-box {
  background-color: color-mix(in srgb, var(--btn-delete-bg) 8%, var(--background-color)) !important;
  border: 1px solid color-mix(in srgb, var(--btn-delete-bg) 25%, transparent) !important;
}

.theme-error-box-icon {
  color: var(--btn-delete-bg) !important;
}

.theme-error-box-title {
  color: color-mix(in srgb, var(--btn-delete-bg) 80%, var(--text-color)) !important;
}

.theme-error-box-text {
  color: color-mix(in srgb, var(--btn-delete-bg) 70%, var(--text-color)) !important;
}

/* Achievement/Badge Card utilities */
/* Light themes: dark text on light golden background */
.achievement-card {
  --badge-card-text: #1f2937;           /* gray-800 - primary text */
  --badge-card-text-muted: #4b5563;     /* gray-600 - secondary text */
}

.achievement-card .theme-text {
  color: var(--badge-card-text) !important;
}

.achievement-card .theme-text-muted {
  color: var(--badge-card-text-muted) !important;
}

/* Dark themes: light text on dark background */
html[data-theme='dark'] .achievement-card,
html[data-theme='purple'] .achievement-card {
  --badge-card-text: #f1f5f9;           /* slate-100 - light primary text */
  --badge-card-text-muted: #cbd5e1;     /* slate-300 - light secondary text */
}

/* Bonus Badge utilities - for displaying positive indicators like bonus points */
.theme-bonus-badge {
  background-color: color-mix(in srgb, var(--accent-4-color) 15%, var(--background-color)) !important;
  color: var(--accent-4-color) !important;
  border: 1px solid color-mix(in srgb, var(--accent-4-color) 30%, transparent);
}

/* Theme Toggle Button utilities */
.theme-toggle-btn {
  background-color: color-mix(in srgb, var(--card-bg) 80%, transparent) !important;
  border-color: var(--border-color) !important;
  backdrop-filter: blur(4px);
}

.theme-toggle-btn:hover {
  background-color: color-mix(in srgb, var(--card-bg) 90%, var(--text-color) 10%) !important;
}

/* Theme Dropdown Menu utilities */
.theme-dropdown-menu {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.theme-dropdown-item {
  color: var(--text-color) !important;
}

.theme-dropdown-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-color) !important;
}

/* Difficulty Badge utilities - for achievement difficulty indicators */
.theme-difficulty-bronze {
  background-color: #fef3c7 !important; /* amber-100 */
  color: #92400e !important; /* amber-800 */
}

html[data-theme='dark'] .theme-difficulty-bronze,
html[data-theme='purple'] .theme-difficulty-bronze {
  background-color: rgba(217, 119, 6, 0.2) !important; /* amber-600/20 for better visibility */
  color: #fcd34d !important; /* amber-300 - lighter for dark backgrounds */
}

.theme-difficulty-silver {
  background-color: #f1f5f9 !important; /* slate-100 */
  color: #1e293b !important; /* slate-800 */
}

html[data-theme='dark'] .theme-difficulty-silver,
html[data-theme='purple'] .theme-difficulty-silver {
  background-color: rgba(100, 116, 139, 0.2) !important; /* slate-500/20 */
  color: #cbd5e1 !important; /* slate-300 - lighter */
}

.theme-difficulty-gold {
  background-color: #fef9c3 !important; /* yellow-100 */
  color: #854d0e !important; /* yellow-800 */
}

html[data-theme='dark'] .theme-difficulty-gold,
html[data-theme='purple'] .theme-difficulty-gold {
  background-color: rgba(234, 179, 8, 0.2) !important; /* yellow-500/20 */
  color: #fef08a !important; /* yellow-200 - much lighter */
}

.theme-difficulty-default {
  background-color: color-mix(in srgb, var(--primary-color) 15%, var(--background-color)) !important;
  color: var(--primary-color) !important;
}

/* Token Count Display utilities */
.theme-token-display {
  background-color: var(--token-display-bg) !important;
  color: var(--token-display-text) !important;
  border-color: var(--token-display-border) !important;
}

.theme-token-value {
  color: var(--token-display-value) !important;
  font-weight: 600;
}

.theme-token-icon {
  color: var(--token-display-icon) !important;
}

.theme-premium-badge {
  background-color: #fef9c3 !important; /* yellow-100 */
  color: #ca8a04 !important; /* yellow-600 */
}

html[data-theme='dark'] .theme-premium-badge,
html[data-theme='purple'] .theme-premium-badge {
  background-color: rgba(234, 179, 8, 0.2) !important; /* yellow-500/20 */
  color: #fef08a !important; /* yellow-200 */
}

.theme-current-badge {
  background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
  color: var(--primary-color) !important;
}

.theme-current-ring {
  --tw-ring-color: var(--primary-color) !important;
}

.theme-vacation-indicator {
  color: var(--btn-archive-bg) !important;
}

.theme-active-member-badge {
  background-color: #dcfce7 !important; /* green-100 */
  color: #166534 !important; /* green-800 */
}

html[data-theme='dark'] .theme-active-member-badge,
html[data-theme='purple'] .theme-active-member-badge {
  background-color: rgba(74, 222, 128, 0.2) !important; /* green-400/20 */
  color: #86efac !important; /* green-300 */
}

.theme-toggle-bg {
  background-color: var(--border-color) !important;
}

.theme-toggle-peer-focus {
  --tw-ring-color: var(--btn-archive-hover) !important;
}

.theme-toggle-checked {
  background-color: var(--btn-archive-bg) !important;
}

.theme-toggle-after {
  background-color: white !important;
  border-color: var(--border-color) !important;
}

html[data-theme='dark'] .theme-toggle-after,
html[data-theme='purple'] .theme-toggle-after {
  background-color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

/* Avatar Rotation Indicator */
.avatar-rotator-active {
  position: relative;
}

.avatar-rotator-active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 3px solid var(--primary-color);
  border-radius: inherit;
  pointer-events: none;
  animation: avatar-rotation-pulse 2s ease-in-out infinite;
}

@keyframes avatar-rotation-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Cursor feedback for rotatable avatars */
[data-controller*="avatar-rotator"] {
  cursor: pointer;
  transition: transform 0.1s ease;
}

[data-controller*="avatar-rotator"]:active {
  transform: scale(0.98);
}

[data-controller*="avatar-rotator"]:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}