/**
 * YesNote Master Theme - Dark Mode (Default)
 * Wings of Imagination Aesthetic
 * Chameleon UI Compatible - Dynamic HSL Color System
 * Version: 2.0 (Motia Migration)
 */

/* ============================================
   BASE HUE CONTROL (Chameleon UI)
   ============================================ */
:root {
  /* Dynamic Hue (0-360) - Changes with mood */
  --base-hue: 222;          /* Default: Deep Blue */
  --base-sat: 15%;          /* Base Saturation (Low/Calm) */

  /* Brand Identity (FIXED - Does NOT change with mood) */
  --accent-brand: hsl(195, 85%, 55%); /* Sky Blue - Wings of Imagination */

  /* ============================================
     BACKGROUND LEVELS
     ============================================ */
  --bg-deep:     hsl(var(--base-hue), var(--base-sat), 5%);
  --bg-surface:  hsl(var(--base-hue), var(--base-sat), 10%);
  --bg-elevated: hsl(var(--base-hue), var(--base-sat), 16%);
  --bg-input:    hsl(var(--base-hue), var(--base-sat), 12%);  /* Input Field */
  --bg-overlay:  hsla(var(--base-hue), var(--base-sat), 5%, 0.95);

  /* ============================================
     ACTION COLORS (Interactive Elements)
     ============================================ */
  --primary:       hsl(var(--base-hue), 70%, 55%);
  --primary-hover: hsl(var(--base-hue), 75%, 60%);
  --primary-active: hsl(var(--base-hue), 80%, 50%);
  --primary-glow:  hsl(var(--base-hue), 70%, 55%, 0.3);  /* Glow effect */
  --primary-disabled: hsl(var(--base-hue), 30%, 35%);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-main:   hsl(var(--base-hue), 10%, 95%);
  --text-muted:  hsl(var(--base-hue), 10%, 65%);
  --text-subtle: hsl(var(--base-hue), 10%, 45%);
  --text-dim:    hsl(var(--base-hue), 10%, 45%);  /* Alias for legacy */
  --text-inverse: hsl(var(--base-hue), 10%, 10%);

  /* ============================================
     BORDER & DIVIDERS (Thin & Subtle)
     ============================================ */
  --border-subtle: hsl(var(--base-hue), 15%, 15%);
  --border-dim:    hsl(var(--base-hue), 15%, 15%);  /* Alias for legacy */
  --border-highlight: hsl(var(--base-hue), 15%, 25%);  /* Brighter borders */
  --border-strong: hsl(var(--base-hue), 20%, 25%);
  --border-focus:  hsl(var(--base-hue), 70%, 55%);

  /* ============================================
     SEMANTIC COLORS (Fixed - Status Indicators)
     ============================================ */
  --success: hsl(150, 60%, 50%);
  --error:   hsl(0, 70%, 55%);
  --warning: hsl(45, 90%, 60%);
  --info:    hsl(200, 70%, 55%);

  /* ============================================
     GLASSMORPHISM (Wings of Imagination)
     ============================================ */
  --glass-bg: hsla(var(--base-hue), var(--base-sat), 10%, 0.7);
  --glass-border: hsla(var(--base-hue), 20%, 100%, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* ============================================
     SPACING & SIZING (8px Grid)
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-default: 6px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ============================================
     BACKWARD COMPATIBILITY (Legacy Aliases)
     ============================================ */
  --theme-bg: var(--bg-deep);
  --theme-surface: var(--bg-surface);
  --theme-surface-elevated: var(--bg-elevated);
  --theme-text: var(--text-main);
  --theme-text-main: var(--text-main);
  --theme-text-secondary: var(--text-muted);
  --theme-border: var(--border-dim);
  --theme-primary: var(--primary);
  --theme-primary-hover: var(--primary-hover);
  --theme-sidebar-bg: var(--bg-deep);
  --theme-sidebar-panel-bg: var(--bg-surface);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(
    circle at top,
    hsl(var(--base-hue), var(--base-sat), 18%) 0,
    hsl(var(--base-hue), var(--base-sat), 8%) 55%,
    hsl(var(--base-hue), var(--base-sat), 3%) 100%
  );
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* ============================================
   LANDING PAGE STYLES (Wings of Imagination)
   ============================================ */
.landing {
  background: radial-gradient(circle at center, 
              hsl(var(--base-hue), 25%, 12%) 0%, 
              hsl(var(--base-hue), 15%, 5%) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.landing .hero-content {
  position: relative;
  z-index: 1;
  padding: 40px;
  animation: fadeIn 1s ease-out;
}

.landing h1 {
  font-size: 5rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent-brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   AUTH PAGE STYLES (Login/Register)
   ============================================ */
.auth-page {
  background: radial-gradient(circle at center, 
              hsl(var(--base-hue), 20%, 10%) 0%, 
              hsl(var(--base-hue), 15%, 5%) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-page .card {
  width: 100%;
  max-width: 420px;
  padding: 3rem;
  background: hsla(var(--base-hue), var(--base-sat), 8%, 0.8);
}

.logo-container {
  text-align: center;
  margin-bottom: 2.5rem;
}

.logo-container svg {
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px hsla(195, 85%, 55%, 0.4));
}

.logo-container h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.logo-container p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.error-msg {
  background: hsla(0, 70%, 55%, 0.1);
  border-left: 3px solid var(--error);
  color: hsl(0, 70%, 75%);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.footer-links {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-subtle);
}

.footer-links a {
  font-weight: 600;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Rounding */
.rounded { border-radius: var(--radius-default); }
.rounded-full { border-radius: var(--radius-full); }

/* Brand Accent (Fixed Color) */
.accent { color: var(--accent-brand); }
.bg-accent { background: var(--accent-brand); }
.border-accent { border-color: var(--accent-brand); }

/* Backgrounds */
.bg-deep { background: var(--bg-deep); }
.bg-surface { background: var(--bg-surface); }
.bg-elevated { background: var(--bg-elevated); }

/* Text Colors */
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

/* Borders */
.border { border: var(--border-width) solid var(--border-subtle); }
.border-strong { border: var(--border-width) solid var(--border-strong); }

/* ============================================
   OPACITY UTILITIES (10% - 90% steps)
   ============================================ */

/* Background Opacity - Primary */
.bg-primary\/10 { background: hsla(var(--base-hue), 70%, 55%, 0.1); }
.bg-primary\/20 { background: hsla(var(--base-hue), 70%, 55%, 0.2); }
.bg-primary\/30 { background: hsla(var(--base-hue), 70%, 55%, 0.3); }
.bg-primary\/40 { background: hsla(var(--base-hue), 70%, 55%, 0.4); }
.bg-primary\/50 { background: hsla(var(--base-hue), 70%, 55%, 0.5); }
.bg-primary\/60 { background: hsla(var(--base-hue), 70%, 55%, 0.6); }
.bg-primary\/70 { background: hsla(var(--base-hue), 70%, 55%, 0.7); }
.bg-primary\/80 { background: hsla(var(--base-hue), 70%, 55%, 0.8); }
.bg-primary\/90 { background: hsla(var(--base-hue), 70%, 55%, 0.9); }

/* Background Opacity - Surface */
.bg-surface\/10 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.1); }
.bg-surface\/20 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.2); }
.bg-surface\/30 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.3); }
.bg-surface\/40 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.4); }
.bg-surface\/50 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.5); }
.bg-surface\/60 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.6); }
.bg-surface\/70 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.7); }
.bg-surface\/80 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.8); }
.bg-surface\/90 { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.9); }

/* Background Opacity - Accent (Fixed Brand Color) */
.bg-accent\/10 { background: hsla(195, 85%, 55%, 0.1); }
.bg-accent\/20 { background: hsla(195, 85%, 55%, 0.2); }
.bg-accent\/30 { background: hsla(195, 85%, 55%, 0.3); }
.bg-accent\/40 { background: hsla(195, 85%, 55%, 0.4); }
.bg-accent\/50 { background: hsla(195, 85%, 55%, 0.5); }
.bg-accent\/60 { background: hsla(195, 85%, 55%, 0.6); }
.bg-accent\/70 { background: hsla(195, 85%, 55%, 0.7); }
.bg-accent\/80 { background: hsla(195, 85%, 55%, 0.8); }
.bg-accent\/90 { background: hsla(195, 85%, 55%, 0.9); }

/* Border Opacity - Primary */
.border-primary\/10 { border-color: hsla(var(--base-hue), 70%, 55%, 0.1); }
.border-primary\/20 { border-color: hsla(var(--base-hue), 70%, 55%, 0.2); }
.border-primary\/30 { border-color: hsla(var(--base-hue), 70%, 55%, 0.3); }
.border-primary\/40 { border-color: hsla(var(--base-hue), 70%, 55%, 0.4); }
.border-primary\/50 { border-color: hsla(var(--base-hue), 70%, 55%, 0.5); }
.border-primary\/60 { border-color: hsla(var(--base-hue), 70%, 55%, 0.6); }
.border-primary\/70 { border-color: hsla(var(--base-hue), 70%, 55%, 0.7); }
.border-primary\/80 { border-color: hsla(var(--base-hue), 70%, 55%, 0.8); }
.border-primary\/90 { border-color: hsla(var(--base-hue), 70%, 55%, 0.9); }

/* Border Opacity - Surface */
.border-surface\/10 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.1); }
.border-surface\/20 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.2); }
.border-surface\/30 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.3); }
.border-surface\/40 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.4); }
.border-surface\/50 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.5); }
.border-surface\/60 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.6); }
.border-surface\/70 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.7); }
.border-surface\/80 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.8); }
.border-surface\/90 { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.9); }

/* Border Opacity - Accent (Fixed Brand Color) */
.border-accent\/10 { border-color: hsla(195, 85%, 55%, 0.1); }
.border-accent\/20 { border-color: hsla(195, 85%, 55%, 0.2); }
.border-accent\/30 { border-color: hsla(195, 85%, 55%, 0.3); }
.border-accent\/40 { border-color: hsla(195, 85%, 55%, 0.4); }
.border-accent\/50 { border-color: hsla(195, 85%, 55%, 0.5); }
.border-accent\/60 { border-color: hsla(195, 85%, 55%, 0.6); }
.border-accent\/70 { border-color: hsla(195, 85%, 55%, 0.7); }
.border-accent\/80 { border-color: hsla(195, 85%, 55%, 0.8); }
.border-accent\/90 { border-color: hsla(195, 85%, 55%, 0.9); }

/* ============================================
   HOVER OPACITY UTILITIES
   ============================================ */

/* Hover: Background Primary */
.hover\:bg-primary\/10:hover { background: hsla(var(--base-hue), 70%, 55%, 0.1); }
.hover\:bg-primary\/20:hover { background: hsla(var(--base-hue), 70%, 55%, 0.2); }
.hover\:bg-primary\/30:hover { background: hsla(var(--base-hue), 70%, 55%, 0.3); }
.hover\:bg-primary\/40:hover { background: hsla(var(--base-hue), 70%, 55%, 0.4); }
.hover\:bg-primary\/50:hover { background: hsla(var(--base-hue), 70%, 55%, 0.5); }
.hover\:bg-primary\/60:hover { background: hsla(var(--base-hue), 70%, 55%, 0.6); }
.hover\:bg-primary\/70:hover { background: hsla(var(--base-hue), 70%, 55%, 0.7); }
.hover\:bg-primary\/80:hover { background: hsla(var(--base-hue), 70%, 55%, 0.8); }
.hover\:bg-primary\/90:hover { background: hsla(var(--base-hue), 70%, 55%, 0.9); }

/* Hover: Background Surface */
.hover\:bg-surface\/10:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.1); }
.hover\:bg-surface\/20:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.2); }
.hover\:bg-surface\/30:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.3); }
.hover\:bg-surface\/40:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.4); }
.hover\:bg-surface\/50:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.5); }
.hover\:bg-surface\/60:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.6); }
.hover\:bg-surface\/70:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.7); }
.hover\:bg-surface\/80:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.8); }
.hover\:bg-surface\/90:hover { background: hsla(var(--base-hue), var(--base-sat), 10%, 0.9); }

/* Hover: Background Accent */
.hover\:bg-accent\/10:hover { background: hsla(195, 85%, 55%, 0.1); }
.hover\:bg-accent\/20:hover { background: hsla(195, 85%, 55%, 0.2); }
.hover\:bg-accent\/30:hover { background: hsla(195, 85%, 55%, 0.3); }
.hover\:bg-accent\/40:hover { background: hsla(195, 85%, 55%, 0.4); }
.hover\:bg-accent\/50:hover { background: hsla(195, 85%, 55%, 0.5); }
.hover\:bg-accent\/60:hover { background: hsla(195, 85%, 55%, 0.6); }
.hover\:bg-accent\/70:hover { background: hsla(195, 85%, 55%, 0.7); }
.hover\:bg-accent\/80:hover { background: hsla(195, 85%, 55%, 0.8); }
.hover\:bg-accent\/90:hover { background: hsla(195, 85%, 55%, 0.9); }

/* Hover: Border Primary */
.hover\:border-primary\/10:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.1); }
.hover\:border-primary\/20:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.2); }
.hover\:border-primary\/30:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.3); }
.hover\:border-primary\/40:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.4); }
.hover\:border-primary\/50:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.5); }
.hover\:border-primary\/60:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.6); }
.hover\:border-primary\/70:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.7); }
.hover\:border-primary\/80:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.8); }
.hover\:border-primary\/90:hover { border-color: hsla(var(--base-hue), 70%, 55%, 0.9); }

/* Hover: Border Surface */
.hover\:border-surface\/10:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.1); }
.hover\:border-surface\/20:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.2); }
.hover\:border-surface\/30:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.3); }
.hover\:border-surface\/40:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.4); }
.hover\:border-surface\/50:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.5); }
.hover\:border-surface\/60:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.6); }
.hover\:border-surface\/70:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.7); }
.hover\:border-surface\/80:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.8); }
.hover\:border-surface\/90:hover { border-color: hsla(var(--base-hue), var(--base-sat), 10%, 0.9); }

/* Hover: Border Accent */
.hover\:border-accent\/10:hover { border-color: hsla(195, 85%, 55%, 0.1); }
.hover\:border-accent\/20:hover { border-color: hsla(195, 85%, 55%, 0.2); }
.hover\:border-accent\/30:hover { border-color: hsla(195, 85%, 55%, 0.3); }
.hover\:border-accent\/40:hover { border-color: hsla(195, 85%, 55%, 0.4); }
.hover\:border-accent\/50:hover { border-color: hsla(195, 85%, 55%, 0.5); }
.hover\:border-accent\/60:hover { border-color: hsla(195, 85%, 55%, 0.6); }
.hover\:border-accent\/70:hover { border-color: hsla(195, 85%, 55%, 0.7); }
.hover\:border-accent\/80:hover { border-color: hsla(195, 85%, 55%, 0.8); }
.hover\:border-accent\/90:hover { border-color: hsla(195, 85%, 55%, 0.9); }

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Buttons (Minimalist Single-Tone) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: var(--text-main);
  border: none;
  border-radius: var(--radius-default);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn:active {
  background: var(--primary-active);
  transform: translateY(0);
}

.btn:disabled {
  background: var(--primary-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Cards (Glassmorphism) */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-default);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
}

/* Inputs */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-default);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  transition: all var(--transition-base);
}

.input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px hsla(var(--base-hue), 70%, 55%, 0.2);
}

.input::placeholder {
  color: var(--text-subtle);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* ============================================
   WINGS OF IMAGINATION ANIMATIONS
   ============================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px var(--accent-brand); }
  50% { box-shadow: 0 0 40px var(--accent-brand); }
}

.glow-animation {
  animation: glow 2s ease-in-out infinite;
}

/* Smooth color transitions for Chameleon UI */
* {
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}
/* ============================================
   LEGACY COMPONENT STYLES
   ============================================ */

/* Transparent Scrollbar (Legacy Class) */
.scrollbar-transparent::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-transparent::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-transparent::-webkit-scrollbar-thumb {
  background: hsla(var(--base-hue), var(--base-sat), 15%, 0.2);
  border-radius: 4px;
  transition: background 0.2s;
}

.scrollbar-transparent::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--base-hue), var(--base-sat), 15%, 0.4);
}

.scrollbar-transparent {
  scrollbar-width: thin;
  scrollbar-color: hsla(var(--base-hue), var(--base-sat), 15%, 0.2) transparent;
}

/* Placeholder Styling (Legacy - 50% Opacity) */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Input Focus States (Legacy - Subtle Border) */
input:not([type="range"]):focus,
textarea:focus {
  outline: none;
  border-color: var(--border-dim);
}

/* Range Slider Styling (Legacy - For Future Mood Selector) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: hsl(var(--base-hue), var(--base-sat), 15%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  background: hsl(var(--base-hue), var(--base-sat), 15%);
  height: 6px;
  border-radius: 3px;
  width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: hsl(var(--base-hue), 70%, 55%);
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 2px solid hsl(var(--base-hue), var(--base-sat), 10%);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: -6px;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: hsl(var(--base-hue), 75%, 60%);
  transform: scale(1.1);
}

input[type="range"]::-moz-range-track {
  background: hsl(var(--base-hue), var(--base-sat), 15%);
  height: 6px;
  border-radius: 3px;
  border: none;
  width: 100%;
}

input[type="range"]::-moz-range-thumb {
  background: hsl(var(--base-hue), 70%, 55%);
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 2px solid hsl(var(--base-hue), var(--base-sat), 10%);
  cursor: pointer;
  transition: all 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
  background: hsl(var(--base-hue), 75%, 60%);
  transform: scale(1.1);
}

/* bankroll Panchatantra */