/* Sainity Health Central Theme Styles */
:root {
  /* Light mode colors from README.md */
  --theme-bg: #F5F5DC; /* Cream/beige - Background */
  --theme-primary: #FAC515; /* Gold - Primary */
  --theme-secondary: #C97D60; /* Warm terracotta - Secondary */
  --theme-text: #4D3B29; /* Dark brown - Text */
  --theme-background: #F5F5DC; /* Cream/beige - Background */
  --theme-tint: #4D3B29; /* Dark brown */
  --theme-icon: #687076;
  --theme-card-bg: #FFFFFF;
  --theme-button-bg: #FFFFFF;
  --theme-input-bg: #FFFFFF;
  --theme-error: #B91C1C; /* Deep terracotta red */
  --theme-success: #7A8B7A; /* Warm sage green */
  --theme-warning: #D97706; /* Warm amber */
  --theme-info: #3b82f6;
  --theme-loading: #4D3B29; /* Dark brown */
  --theme-accent: #C97D60; /* Warm terracotta - Secondary color in light mode */
  --theme-text-on-primary: #4D3B29; /* Dark brown */
  
  /* Hero gradient for light mode */
  --theme-hero-gradient: linear-gradient(90deg, var(--theme-card-bg) 0%, var(--theme-bg) 150%);
  
  /* Card border color for light mode */
  --theme-card-border: rgba(77, 59, 41, 0.1);
  
  /* Category colors - from README.md */
  --theme-category-emotion: #E52D2D; /* Red */
  --theme-category-food: #D4A017; /* Deep Yellow */
  --theme-category-activity: #E8E8E8; /* Light Gray-White */
  --theme-category-environment: #88E850;
  --theme-category-sensation: #8F55E3; /* Purple */
  --theme-category-sleep: #4A90E2; /* Blue */
  --theme-category-social: #55BBE3;
  --theme-category-supplement: #8B7D8B; /* Funky Gray */
  --theme-category-medication: #9B59B6;
  --theme-category-catalyst: #FF7A42; /* Cigarette Orange */
  --theme-category-cycle: #FF6B9D; /* Pink */
  --theme-category-poop: #8B4513; /* Brown */
  --theme-category-default: #6b7280; /* Gray */
  
  --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --theme-font-logo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode colors from README.md */
[data-theme="dark"] {
  --theme-bg: #000000; /* Pure black - deep, modern base */
  --theme-primary: #E6B800; /* Muted gold - Primary */
  --theme-secondary: #B8705A; /* Muted terracotta - Secondary */
  --theme-text: #F5F5DC; /* Cream - Text */
  --theme-background: #000000; /* Pure black - deep, modern base */
  --theme-tint: #F5F5DC; /* Cream */
  --theme-icon: #9BA1A6;
  --theme-card-bg: #1A1512; /* Dark brown - base tier */
  --theme-button-bg: #1A1512; /* Dark brown */
  --theme-input-bg: #1A1512; /* Dark brown */
  --theme-error: #A01A1A; /* Deep warm red */
  --theme-success: #6B7A6B; /* Muted sage */
  --theme-warning: #C9730A; /* Warm amber */
  --theme-info: #3b82f6;
  --theme-loading: #F5F5DC; /* Cream */
  --theme-accent: #B8705A; /* Muted terracotta - Secondary color in dark mode */
  --theme-text-on-primary: #000000; /* Black text on primary (gold background) */
  
  /* Card border color for dark mode - more subtle */
  --theme-card-border: rgba(245, 245, 220, 0.1);
  
  /* Hero gradient for dark mode */
  --theme-hero-gradient: linear-gradient(90deg, var(--theme-card-bg) 0%, var(--theme-bg) 150%);
  
  /* Category colors remain the same in dark mode - from README.md */
  --theme-category-emotion: #E52D2D; /* Red */
  --theme-category-food: #D4A017; /* Deep Yellow */
  --theme-category-activity: #E8E8E8; /* Light Gray-White */
  --theme-category-environment: #88E850;
  --theme-category-sensation: #8F55E3; /* Purple */
  --theme-category-sleep: #4A90E2; /* Blue */
  --theme-category-social: #55BBE3;
  --theme-category-supplement: #8B7D8B; /* Funky Gray */
  --theme-category-medication: #9B59B6;
  --theme-category-catalyst: #FF7A42; /* Cigarette Orange */
  --theme-category-cycle: #FF6B9D; /* Pink */
  --theme-category-poop: #8B4513; /* Brown */
  --theme-category-default: #6b7280; /* Gray */
}

/* Auto-detect system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-bg: #000000; /* Pure black - deep, modern base */
    --theme-primary: #E6B800; /* Muted gold - Primary */
    --theme-secondary: #B8705A; /* Muted terracotta - Secondary */
    --theme-text: #F5F5DC; /* Cream - Text */
    --theme-background: #000000; /* Pure black - deep, modern base */
    --theme-tint: #F5F5DC; /* Cream */
    --theme-icon: #9BA1A6;
    --theme-card-bg: #1A1512; /* Dark brown - base tier */
    --theme-button-bg: #1A1512; /* Dark brown */
    --theme-input-bg: #1A1512; /* Dark brown */
    --theme-error: #A01A1A; /* Deep warm red */
    --theme-success: #6B7A6B; /* Muted sage */
    --theme-warning: #C9730A; /* Warm amber */
    --theme-info: #3b82f6;
    --theme-loading: #F5F5DC; /* Cream */
    --theme-accent: #B8705A; /* Muted terracotta - Secondary color in dark mode */
    --theme-text-on-primary: #000000; /* Black text on primary (gold background) */
    --theme-card-border: rgba(245, 245, 220, 0.1);
    --theme-hero-gradient: linear-gradient(90deg, var(--theme-bg) 0%, var(--theme-card-bg) 150%);
  }
}

body {
  font-family: var(--theme-font-sans);
  background-color: var(--theme-background);
  color: var(--theme-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text);
  font-family: var(--theme-font-sans);
}

/* Global link styles - only for general content links */
a:not(footer a):not(nav a) {
  color: var(--theme-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.3s ease;
}

a:not(footer a):not(nav a):hover {
  border-bottom-color: var(--theme-accent);
}

/* Footer link styles - override global styles */
footer a {
  color: var(--theme-text) !important;
  text-decoration: none;
  border-bottom: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--theme-accent) !important;
  border-bottom: none;
}

/* Navigation link styles - ensure they're not affected by global styles */
nav a {
  text-decoration: none;
  border-bottom: none;
}

/* Centralized Logo Styling */
.logo, .font-logo, .logo-text {
  font-family: var(--theme-font-logo);
  color: var(--theme-text);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.logo {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
}

.logo-text {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
}

.font-logo {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
}

.section {
  background: var(--theme-card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(77, 59, 41, 0.1);
  border-left: 4px solid var(--theme-card-border);
  margin-bottom: 2rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-secondary);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle i {
  color: var(--theme-text);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

/* Utility classes for backgrounds */
.bg-default {
  background-color: var(--theme-background) !important;
}
.bg-primary {
  background-color: var(--theme-primary) !important;
}
.bg-secondary {
  background-color: var(--theme-secondary) !important;
}
.bg-card {
  background-color: var(--theme-card-bg) !important;
}
.bg-button {
  background-color: var(--theme-button-bg) !important;
}
.bg-input {
  background-color: var(--theme-input-bg) !important;
}

/* Utility classes for text */
.text-default {
  color: var(--theme-text) !important;
}
.text-primary {
  color: var(--theme-primary) !important;
}
.text-secondary {
  color: var(--theme-secondary) !important;
}
.text-accent {
  color: var(--theme-accent) !important;
}
.text-error {
  color: var(--theme-error) !important;
}
.text-success {
  color: var(--theme-success) !important;
}
.text-warning {
  color: var(--theme-warning) !important;
}
.text-info {
  color: var(--theme-info) !important;
}

/* Category color utilities */
.text-category-emotion { color: var(--theme-category-emotion) !important; }
.text-category-food { color: var(--theme-category-food) !important; }
.text-category-activity { color: var(--theme-category-activity) !important; }
.text-category-sensation { color: var(--theme-category-sensation) !important; }
.text-category-sleep { color: var(--theme-category-sleep) !important; }
.text-category-supplement { color: var(--theme-category-supplement) !important; }
.text-category-medication { color: var(--theme-category-medication) !important; }
.text-category-catalyst { color: var(--theme-category-catalyst) !important; }
.text-category-cycle { color: var(--theme-category-cycle) !important; }
.text-category-poop { color: var(--theme-category-poop) !important; }
.text-category-default { color: var(--theme-category-default) !important; }

/* Theme-prefixed category color utilities (for HTML compatibility) */
.text-theme-category-emotion { color: var(--theme-category-emotion) !important; }
.text-theme-category-food { color: var(--theme-category-food) !important; }
.text-theme-category-activity { color: var(--theme-category-activity) !important; }
.text-theme-category-sensation { color: var(--theme-category-sensation) !important; }
.text-theme-category-sleep { color: var(--theme-category-sleep) !important; }
.text-theme-category-supplement { color: var(--theme-category-supplement) !important; }
.text-theme-category-medication { color: var(--theme-category-medication) !important; }
.text-theme-category-catalyst { color: var(--theme-category-catalyst) !important; }
.text-theme-category-cycle { color: var(--theme-category-cycle) !important; }
.text-theme-category-poop { color: var(--theme-category-poop) !important; }
.text-theme-category-default { color: var(--theme-category-default) !important; }
.text-theme-category-social { color: var(--theme-category-social) !important; }
.text-theme-category-environment { color: var(--theme-category-environment) !important; }

/* Border utilities */
.border-primary {
  border-color: var(--theme-primary) !important;
}
.border-secondary {
  border-color: var(--theme-secondary) !important;
}
.border-accent {
  border-color: var(--theme-accent) !important;
}
.border-error {
  border-color: var(--theme-error) !important;
}
.border-text {
  border-color: var(--theme-text) !important;
}

/* Form elements */
input, textarea, select {
  background-color: var(--theme-input-bg);
  color: var(--theme-text);
  border: 1px solid var(--theme-secondary);
  border-radius: 4px;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px rgba(240, 59, 155, 0.1);
}

/* Button styles */
.btn {
  background-color: var(--theme-button-bg);
  color: var(--theme-text);
  border: 2px solid var(--theme-secondary);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn:hover {
  background-color: var(--theme-secondary);
  color: var(--theme-text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
  border-color: var(--theme-primary);
}

.btn-primary:hover {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-text-on-primary);
}

.btn-secondary {
  background-color: var(--theme-secondary);
  color: var(--theme-text-on-primary);
  border-color: var(--theme-secondary);
}

.btn-secondary:hover {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
}

.btn-outline {
  background-color: transparent;
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-outline:hover {
  background-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
}

.btn-accent {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-primary);
  border-color: var(--theme-accent);
}

.btn-accent:hover {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
}

/* Card border utility class */
.card-border {
  border-color: var(--theme-card-border) !important;
}

/* Smooth transitions for all elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}