/* ============================================================================
   VEGNIMALS DESIGN SYSTEM - SCIENCE-BACKED UX COLORS
   
   This file is the SINGLE SOURCE OF TRUTH for all colors in the app.
   All templates inherit from this. Changes here apply everywhere.
   
   SCIENTIFIC RESEARCH APPLIED:
   
   1. BACKGROUND COLOR (Cream #FAF8F5 vs Pure White #FFFFFF)
      Research: Off-white/cream backgrounds reduce eye strain compared to pure white
      Sources: Washington Post Design System, UXMovement, academic studies
      Our cream (#FAF8F5) follows industry best practices - NOT pure white
   
   2. TEXT COLOR (Dark Gray #222222 vs Pure Black #000000)
      Research: Pure black on pure white causes retinal overstimulation
      Dark gray reduces harsh contrast while maintaining 15:1 ratio
      Source: PMC eye fatigue studies, ARVO Journals
   
   3. GREEN (#2D5A3D) - PRIMARY BRAND COLOR
      Psychology: Promotes calm, trust, reduces mental fatigue
      Science: Easiest color for human eyes to process
      Effect: Lower heart rate, improved concentration
      Source: Color Psychology research, UXMatters
   
   4. GOLD (#D4A846) - ACCENT COLOR  
      Psychology: Warmth, optimism, creativity, premium feel
      Use: CTAs on cream backgrounds, badges, highlights
      NEVER use on green backgrounds (fails WCAG contrast)
   
   5. CREAM/PARCHMENT - BACKGROUNDS
      Psychology: Comfort, warmth, natural, reduces eye strain
      Science: Softer than white, mimics natural paper
      Effect: Users feel more relaxed during extended use
   ============================================================================ */

:root {
  /* Primary Brand Colors - Green promotes calm and reduces eye fatigue */
  --veg-primary: #2D5A3D;
  --veg-primary-light: #4A8B5F;       /* More vibrant light green */
  --veg-primary-dark: #1E3D2A;
  --veg-gold: #E5B84C;                /* Warmer, more vibrant gold */
  --veg-gold-light: #F0D078;
  --veg-gold-dark: #C99B38;
  --veg-purple: #7B5C8A;              /* Softer, more creative purple */
  
  /* Creative Accent Colors - Energy and warmth for a vibrant feel */
  --veg-coral: #E8856C;               /* Warm coral for creative energy */
  --veg-coral-light: #F2A894;
  --veg-sunset: #F4A261;              /* Sunset orange - warmth & inspiration */
  --veg-sunset-light: #F7C291;
  --veg-teal: #4ECDC4;                /* Fresh teal for highlights */
  --veg-rose: #E8A5B3;                /* Soft rose for gentle accents */
  
  /* Invitation/Parchment Theme - Warm brown tones for special invitations */
  --veg-brown-heading: #8B4513;      /* Saddle brown for headings */
  --veg-brown-text: #654321;         /* Dark brown for body text */
  --veg-brown-dark: #2C1810;         /* Very dark brown for contrast */
  --veg-golden: #DAA520;             /* Goldenrod for accents */
  --veg-gold-bright: #FFD700;        /* Bright gold for highlights */
  --veg-orange-warning: #FF8C00;     /* Dark orange for deadlines */
  --veg-invitation-gold-1: #FFD700;  /* Invitation gradient stop 1 */
  --veg-invitation-gold-2: #FFA500;  /* Invitation gradient stop 2 */
  --veg-invitation-gold-3: #DAA520;  /* Invitation gradient stop 3 */
  --veg-invitation-gold-4: #B8860B;  /* Invitation gradient stop 4 */
  --veg-success: #4A9B6B;            /* Success/green indicator */
  --veg-purple-light: #9B7CAA;
  --veg-purple-dark: #5B4C6A;
  
  /* Background Colors - Cream/off-white reduces eye strain vs pure white */
  --veg-cream: #FAF8F5;             /* Main background - scientifically optimal */
  --veg-parchment: #F5F0E8;         /* Secondary/warm background */
  
  /* ============================================
     WCAG AA CONTRAST-SAFE COLOR PAIRINGS
     Minimum 4.5:1 for normal text, 3:1 for large text
     ============================================ */
  
  /* APPROVED COMBINATIONS (WCAG AA+ compliant):
     - White (#FFFFFF) on Green (#2D5A3D) = 7.9:1 ✓ AAA
     - Dark (#222222) on Cream (#FAF8F5) = 15.1:1 ✓ AAA
     - Dark (#222222) on Gold (#D4A846) = 4.7:1 ✓ AA
     - Green (#2D5A3D) on Cream (#FAF8F5) = 6.1:1 ✓ AAA
     - White (#FFFFFF) on Purple (#6B4C7A) = 6.8:1 ✓ AAA
     
     FORBIDDEN COMBINATIONS (fails accessibility):
     - Gold on Green = 3.6:1 ✗ FAILS
     - Cream on Gold = 2.1:1 ✗ FAILS
     - Light gray on white = varies ✗ FAILS
     - Gradient/clip text = unreliable ✗ AVOID
  */
  
  /* Text Colors - Dark gray reduces eye strain vs pure black */
  --veg-text-dark: #222222;          /* Primary text - 15.1:1 on cream */
  --veg-text-medium: #4A4A4A;        /* Secondary text - 7.5:1 on cream, WCAG AAA */
  --veg-text-muted: #595959;         /* Tertiary text - 5.4:1 on cream, WCAG AA */
  --veg-text-light: #FFFFFF;         /* For dark backgrounds - 7.9:1 on green */
  --veg-text-on-gold: #222222;       /* Dark text on gold buttons - 4.7:1 */
  --veg-text-on-primary: #FFFFFF;    /* White text on green backgrounds - 7.9:1 */
  
  /* Status Colors */
  --veg-accent: #C17F59;
  --veg-success: #4A9B6B;
  --veg-warning: #E8A835;
  --veg-error: #C25B56;
  
  /* Layout - Professional Standards (Google Material + Apple HIG)
     Research: 56-72px optimal for mobile headers
     Logo should fill 70-80% of header height for maximum visibility */
  --veg-header-height: 56px;         /* Industry standard - compact but usable */
  --veg-header-height-mobile: 56px;
  --veg-logo-height: 44px;           /* 78% of header - fills space, meets 44px touch target */
  --veg-nav-height: 56px;
  --veg-spacing-sm: 8px;
  --veg-spacing-md: 16px;
  --veg-spacing-lg: 24px;
  --veg-border-radius: 8px;
  --veg-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  /* Typography - Professional readable fonts */
  --veg-font-heading: 'Georgia', 'Times New Roman', serif;
  --veg-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --veg-font-size-base: 16px;        /* Minimum for readability */
  --veg-font-size-sm: 14px;
  --veg-font-size-lg: 18px;
  --veg-line-height: 1.6;            /* Optimal for reading */
  
  /* Animation & Transitions - Creates "alive" feel */
  --veg-transition-fast: 0.15s ease;
  --veg-transition-normal: 0.25s ease;
  --veg-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --veg-hover-lift: translateY(-2px);
  --veg-hover-shadow: 0 6px 20px rgba(45, 90, 61, 0.15);
}

/* Background utility classes */
.veg-bg-primary { background-color: var(--veg-primary) !important; }
.veg-bg-gold { background-color: var(--veg-gold) !important; }
.veg-bg-purple { background-color: var(--veg-purple) !important; }
.veg-bg-cream { background-color: var(--veg-cream) !important; }
.veg-bg-parchment { background-color: var(--veg-parchment) !important; }
.veg-bg-coral { background-color: var(--veg-coral) !important; }
.veg-bg-sunset { background-color: var(--veg-sunset) !important; }
.veg-bg-teal { background-color: var(--veg-teal) !important; }
.veg-bg-rose { background-color: var(--veg-rose) !important; }

/* Text utility classes */
.veg-text-primary { color: var(--veg-primary) !important; }
.veg-text-gold { color: var(--veg-gold) !important; }
.veg-text-purple { color: var(--veg-purple) !important; }
.veg-text-light { color: var(--veg-text-light) !important; }
.veg-text-dark { color: var(--veg-text-dark) !important; }
.veg-text-muted { color: var(--veg-text-muted) !important; }
.veg-text-coral { color: var(--veg-coral) !important; }
.veg-text-sunset { color: var(--veg-sunset) !important; }
.veg-text-teal { color: var(--veg-teal) !important; }

/* Invitation/Parchment theme utility classes */
.veg-text-brown-heading { color: var(--veg-brown-heading) !important; }
.veg-text-brown { color: var(--veg-brown-text) !important; }
.veg-text-golden { color: var(--veg-golden) !important; }
.veg-text-orange-warning { color: var(--veg-orange-warning) !important; }
.veg-bg-golden-gradient { background: linear-gradient(135deg, var(--veg-golden) 0%, var(--veg-gold-bright) 100%) !important; }
.veg-bg-brown-gradient { background: linear-gradient(135deg, var(--veg-brown-dark) 0%, var(--veg-brown-text) 100%) !important; }
.veg-bg-invitation-gradient { 
  background: linear-gradient(135deg, var(--veg-invitation-gold-1) 0%, var(--veg-invitation-gold-2) 25%, var(--veg-invitation-gold-3) 75%, var(--veg-invitation-gold-4) 100%) !important;
  background-size: 400% 400%;
}
.veg-text-success { color: var(--veg-success) !important; }

/* Creative gradient backgrounds - adds visual interest */
.veg-bg-creative-gradient {
  background: linear-gradient(135deg, var(--veg-cream) 0%, #FEF9F3 50%, var(--veg-parchment) 100%) !important;
}

.veg-bg-sunset-gradient {
  background: linear-gradient(135deg, var(--veg-sunset-light) 0%, var(--veg-coral-light) 100%) !important;
}

.veg-bg-nature-gradient {
  background: linear-gradient(135deg, var(--veg-primary-light) 0%, var(--veg-teal) 100%) !important;
}

/* Animation utility classes - makes UI feel alive */
.veg-hover-lift {
  transition: var(--veg-transition-smooth);
}

.veg-hover-lift:hover {
  transform: var(--veg-hover-lift);
  box-shadow: var(--veg-hover-shadow);
}

.veg-pulse {
  animation: veg-pulse 2s infinite;
}

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

.veg-fade-in {
  animation: veg-fade-in 0.3s ease-out;
}

@keyframes veg-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card styles with subtle depth */
.veg-card {
  background: var(--veg-cream);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(45, 90, 61, 0.08);
  transition: var(--veg-transition-smooth);
}

.veg-card:hover {
  box-shadow: 0 4px 16px rgba(45, 90, 61, 0.12);
}

.veg-card-elevated {
  background: var(--veg-cream);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(45, 90, 61, 0.1);
}

/* ============================================
   Component classes are now in components/*.css
   - alerts.css: .veg-alert-success, .veg-alert-warning, etc.
   - cards.css: .veg-card, .veg-golden-card, etc.
   - modals.css: .veg-modal and variants
   - buttons.css: .veg-btn-primary, .veg-btn-gold, etc.
   ============================================ */

/* Global Form Styles - Proper contrast for light backgrounds */
.form-control {
  background-color: #FFFFFF !important;
  color: var(--veg-text-dark, #1A1A1A) !important;
  border: 1px solid rgba(45, 90, 61, 0.3);
}

.form-control::placeholder {
  color: var(--veg-text-medium, #3D3D3D) !important;
  opacity: 0.7;
}

.form-control:focus {
  border-color: var(--veg-primary);
  box-shadow: 0 0 0 0.2rem rgba(45, 90, 61, 0.25);
}

.input-group-text {
  background-color: var(--veg-parchment, #F5F0E8);
  color: var(--veg-primary, #2D5A3D);
  border: 1px solid rgba(45, 90, 61, 0.3);
}

/* Helper text should be visible - WCAG AA requires 4.5:1 minimum */
.text-muted {
  color: var(--veg-text-muted, #595959) !important;
}

/* ============================================
   GLOBAL BASE STYLES
   These are acceptable as they set app-wide defaults
   ============================================ */

body {
  background: linear-gradient(180deg, var(--veg-cream) 0%, #FEF9F3 50%, var(--veg-parchment) 100%);
  color: var(--veg-text-dark, #222222);
  font-family: var(--veg-font-body);
  min-height: 100vh;
}

p, span, div, li, td, th {
  color: inherit;
}

/* Ensure links are visible - research shows 4.5:1 needed for both text and background */
a {
  color: var(--veg-primary, #2D5A3D);
}

a:hover {
  color: var(--veg-primary-dark, #1E3D2A);
}

.veg-header {
  background: linear-gradient(135deg, var(--veg-primary) 0%, var(--veg-primary-dark) 100%);
  color: var(--veg-text-light);
}

.veg-gradient-text {
  background: linear-gradient(135deg, var(--veg-primary) 0%, var(--veg-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.veg-badge-gold {
  background: linear-gradient(135deg, var(--veg-gold) 0%, var(--veg-gold-light) 100%);
  color: var(--veg-text-dark);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ============================================
   BOOTSTRAP BUTTON OVERRIDES
   Single source of truth - changes here apply to ALL
   Bootstrap buttons across the entire app.
   ============================================ */

.btn-primary {
  background: linear-gradient(135deg, var(--veg-primary, #2D5A3D) 0%, var(--veg-primary-dark, #1E3D2A) 100%);
  border-color: var(--veg-primary, #2D5A3D);
  color: var(--veg-text-light, #FFFFFF);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--veg-primary-light, #3D7A52) 0%, var(--veg-primary, #2D5A3D) 100%);
  border-color: var(--veg-primary-light, #3D7A52);
  color: var(--veg-text-light, #FFFFFF);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 90, 61, 0.3);
}

.btn-primary:active {
  background: var(--veg-primary-dark, #1E3D2A);
  border-color: var(--veg-primary-dark, #1E3D2A);
  transform: translateY(0);
}

.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--veg-primary, #2D5A3D);
  color: var(--veg-primary, #2D5A3D);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--veg-primary, #2D5A3D);
  border-color: var(--veg-primary, #2D5A3D);
  color: var(--veg-text-light, #FFFFFF);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 90, 61, 0.3);
}

.btn-secondary {
  background: var(--veg-parchment, #F5F0E8);
  border-color: rgba(45, 90, 61, 0.2);
  color: var(--veg-text-dark, #222222);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--veg-cream, #FAF8F5);
  border-color: var(--veg-primary, #2D5A3D);
  color: var(--veg-primary, #2D5A3D);
}

/* ============================================
   ARTWORK DISPLAY FRAME
   Professional museum-style framing for drawings.
   Creates visual separation regardless of artwork
   background color.
   ============================================ */

.artwork-frame {
  background: var(--veg-cream, #FAF8F5);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04);
  display: inline-block;
  width: 100%;
}

.artwork-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ============================================
   END OF VEGNIMALS DESIGN TOKENS & UTILITIES
   
   All component styles are now in components/*.css
   See docs/CSS_ARCHITECTURE.md for the professional
   open-source pattern we follow.
   ============================================ */