/**
 * Gokelpy Master Color System
 * 
 * Trust-based marketplace design system for construction industry
 * Updated for professional, calm, and trustworthy UI
 * 
 * Design System:
 * - Font: Inter or Roboto
 * - Primary: navy (#0F172A)
 * - Secondary: slate (#1E293B)
 * - Accent: construction yellow (#F59E0B)
 * - Success: green-500 (#10B981)
 * - Danger: red-500 (#EF4444)
 * - Background: slate-50 (#F8FAFC)
 */

:root {
    /* ============================================
       PRIMARY COLORS - Navy & Slate
       ============================================ */
    
    /* Primary - Navy (#0F172A) */
    --color-primary: #0F172A;
    --color-primary-hover: #1E293B;
    --color-primary-light: #334155;
    --color-primary-lighter: #475569;
    --color-primary-lightest: #64748B;
    
    /* Secondary - Slate (#1E293B) */
    --color-secondary: #1E293B;
    --color-secondary-hover: #334155;
    --color-secondary-light: #475569;
    --color-secondary-lighter: #64748B;
    
    /* ============================================
       ACCENT COLORS - Construction Yellow
       ============================================ */
    
    /* Accent - Construction Yellow (#F59E0B) */
    --color-accent: #F59E0B;
    --color-accent-hover: #D97706;
    --color-accent-light: #FBBF24;
    --color-accent-lighter: #FCD34D;
    --color-accent-lightest: #FDE68A;
    
    /* ============================================
       SEMANTIC COLORS
       ============================================ */
    
    /* Success - Green-500 (#10B981) */
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-success-light: #34D399;
    --color-success-lighter: #A7F3D0;
    --color-success-lightest: #D1FAE5;
    
    /* Danger - Red-500 (#EF4444) */
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-danger-light: #F87171;
    --color-danger-lighter: #FECACA;
    --color-danger-lightest: #FEE2E2;
    
    /* Warning - Using Accent Yellow */
    --color-warning: var(--color-accent);
    --color-warning-hover: var(--color-accent-hover);
    --color-warning-light: var(--color-accent-light);
    --color-warning-lighter: var(--color-accent-lighter);
    
    /* Info - Blue */
    --color-info: #3B82F6;
    --color-info-hover: #2563EB;
    --color-info-light: #60A5FA;
    --color-info-lighter: #BFDBFE;
    
    /* ============================================
       NEUTRAL COLORS - Slate Scale
       ============================================ */
    
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
    
    /* ============================================
       TEXT COLORS
       ============================================ */
    
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-muted: var(--color-gray-600);
    --color-text-light: var(--color-gray-500);
    --color-text-on-primary: #FFFFFF;
    --color-text-on-dark: #FFFFFF;
    --color-text-on-accent: #FFFFFF;
    
    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-dark: var(--color-primary);
    --color-bg-overlay: rgba(15, 23, 42, 0.7);
    
    /* Trust Indicators */
    --color-bg-trust: #F0FDF4;
    --color-bg-trust-border: #86EFAC;
    
    /* ============================================
       BORDER COLORS
       ============================================ */
    
    --color-border-light: var(--color-gray-200);
    --color-border-medium: var(--color-gray-300);
    --color-border-dark: var(--color-gray-400);
    --color-border-primary: var(--color-primary);
    --color-border-accent: var(--color-accent);
    
    /* ============================================
       SHADOW COLORS
       ============================================ */
    
    --color-shadow-sm: rgba(15, 23, 42, 0.05);
    --color-shadow: rgba(15, 23, 42, 0.1);
    --color-shadow-md: rgba(15, 23, 42, 0.15);
    --color-shadow-lg: rgba(15, 23, 42, 0.2);
    --color-shadow-xl: rgba(15, 23, 42, 0.3);
    
    /* ============================================
       GRADIENT COLORS
       ============================================ */
    
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-trust: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
    
    /* ============================================
       LEGACY COMPATIBILITY
       ============================================ */
    
    /* Maintain backward compatibility */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary);
    --primary-light: var(--color-primary-light);
    --secondary: var(--color-secondary);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);
}