/**
 * Color System
 * Soria Natural - Botanical Modernism Design
 * 
 * Color Palette:
 * - Primary: Emerald Green (#0b8457)
 * - Accent: Amber (#d4a574)
 * - Neutral: Forest (#0b3a2a)
 */

/* ============================================
   CSS Variables - Colors
   ============================================ */

:root {
    /* Primary Colors - Emerald */
    --color-emerald-50: #f0fdf4;
    --color-emerald-100: #dcfce7;
    --color-emerald-200: #bbf7d0;
    --color-emerald-300: #86efac;
    --color-emerald-400: #4ade80;
    --color-emerald-500: #22c55e;
    --color-emerald-600: #16a34a;
    --color-emerald-700: #0b8457;
    --color-emerald-800: #166534;
    --color-emerald-900: #134e4a;
    
    /* Primary Brand Color */
    --color-primary: #0b8457;
    --color-primary-dark: #067a4a;
    --color-primary-light: #e8f5f0;
    
    /* Accent Colors - Amber */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    
    /* Accent Brand Color */
    --color-accent: #d4a574;
    --color-accent-light: rgba(212, 165, 116, 0.1);
    
    /* Sage Colors - Light Background */
    --color-sage-50: #fafaf9;
    --color-sage-100: #f5f5f4;
    --color-sage-light: #f5f9f7;
    --color-sage-medium: #e8f0ed;
    --color-sage-dark: #d1d5db;
    
    /* Neutral Colors */
    --color-forest: #0b3a2a;
    --color-forest-light: #1a3a2a;
    --color-text-primary: #1a3a2a;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-background: #ffffff;
    --color-background-secondary: #f9fafb;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    /* Emerald Shadows */
    --shadow-emerald-sm: 0 4px 6px rgba(11, 132, 87, 0.1);
    --shadow-emerald-md: 0 10px 15px rgba(11, 132, 87, 0.15);
    --shadow-emerald-lg: 0 20px 25px rgba(11, 132, 87, 0.2);
}

/* ============================================
   Background Colors
   ============================================ */

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.bg-white {
    background-color: var(--color-background);
}

.bg-light {
    background-color: var(--color-background-secondary);
}

.bg-sage {
    background-color: var(--color-sage-light);
}

.bg-sage-medium {
    background-color: var(--color-sage-medium);
}

.bg-emerald {
    background-color: var(--color-primary);
    color: white;
}

.bg-emerald-light {
    background-color: var(--color-emerald-light);
    color: var(--color-primary);
}

.bg-forest {
    background-color: var(--color-forest);
    color: white;
}

.bg-amber {
    background-color: var(--color-accent);
    color: white;
}

.bg-success {
    background-color: var(--color-success);
    color: white;
}

.bg-warning {
    background-color: var(--color-warning);
    color: white;
}

.bg-danger {
    background-color: var(--color-danger);
    color: white;
}

.bg-info {
    background-color: var(--color-info);
    color: white;
}

/* ============================================
   Text Colors
   ============================================ */

.text-primary {
    color: var(--color-primary) !important;
}

.text-primary-dark {
    color: var(--color-primary-dark);
}

.text-emerald {
    color: var(--color-primary);
}

.text-amber {
    color: var(--color-accent);
}

.text-forest {
    color: var(--color-forest);
}

.text-white {
    color: white;
}

.text-muted {
    color: var(--color-text-secondary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-info {
    color: var(--color-info);
}

/* ============================================
   Border Colors
   ============================================ */

.border-primary {
    border-color: var(--color-primary);
}

.border-emerald {
    border-color: var(--color-primary);
}

.border-amber {
    border-color: var(--color-accent);
}

.border-forest {
    border-color: var(--color-forest);
}

.border-light {
    border-color: var(--color-border);
}

.border-lighter {
    border-color: var(--color-border-light);
}

.border-success {
    border-color: var(--color-success);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-danger {
    border-color: var(--color-danger);
}

/* ============================================
   Shadow Classes
   ============================================ */

.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-emerald-sm {
    box-shadow: var(--shadow-emerald-sm);
}

.shadow-emerald-md {
    box-shadow: var(--shadow-emerald-md);
}

.shadow-emerald-lg {
    box-shadow: var(--shadow-emerald-lg);
}

/* ============================================
   Gradient Backgrounds
   ============================================ */

.gradient-emerald {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}

.gradient-emerald-light {
    background: linear-gradient(135deg, var(--color-emerald-light) 0%, var(--color-sage-light) 100%);
}

.gradient-forest {
    background: linear-gradient(135deg, var(--color-forest) 0%, #0a2f20 100%);
    color: white;
}

.gradient-warm {
    background: linear-gradient(135deg, var(--color-accent) 0%, #c9945a 100%);
    color: white;
}

.gradient-sage {
    background: linear-gradient(135deg, var(--color-sage-light) 0%, var(--color-sage-medium) 100%);
}

/* ============================================
   Overlay Classes
   ============================================ */

.overlay-dark {
    background: rgba(0, 0, 0, 0.5);
}

.overlay-dark-sm {
    background: rgba(0, 0, 0, 0.3);
}

.overlay-dark-lg {
    background: rgba(0, 0, 0, 0.7);
}

.overlay-emerald {
    background: rgba(11, 132, 87, 0.5);
}

.overlay-emerald-light {
    background: rgba(11, 132, 87, 0.3);
}

/* ============================================
   Opacity Classes
   ============================================ */

.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* ============================================
   Hover State Colors
   ============================================ */

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

.hover-bg-emerald:hover {
    background-color: var(--color-primary);
    color: white;
}

.hover-bg-sage:hover {
    background-color: var(--color-sage-light);
}

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

/* ============================================
   Focus State Colors
   ============================================ */

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Responsive Colors
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode support here */
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}