/**
 * AISEN Color Palette - Teal Manufacturing Theme
 * ==============================================
 *
 * Target Audience: Manufacturing, Industrial, and B2B sectors
 * Theme Philosophy: Professional, reliable, modern technology with industrial heritage
 *
 * Color Psychology:
 * - Teal: Modern, tech-forward, trustworthy
 * - Slate Gray: Professional, industrial strength, sophisticated
 * - Copper: Manufacturing materials, warmth, precision machinery
 * - Light Blue-Gray: Clean workspace, technical precision
 * - Dark Gray: Reliability, professional text
 */

:root {
  /* ========================================
   * PRIMARY BRAND COLORS
   * ======================================== */

  /* Primary Teal - Modern, tech-forward */
  --color-primary: #0F766E;
  --color-primary-light: #14B8A6;
  --color-primary-dark: #0d5f57;
  --color-primary-50: #f0fdfa;
  --color-primary-100: #ccfbf1;
  --color-primary-500: #14b8a6;
  --color-primary-900: #134e4a;

  /* Secondary Slate Gray - Industrial, professional */
  --color-secondary: #475569;
  --color-secondary-light: #64748b;
  --color-secondary-dark: #334155;
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-500: #64748b;
  --color-secondary-900: #0f172a;

  /* ========================================
   * ACCENT COLORS
   * ======================================== */

  /* Copper Accent - Manufacturing warmth */
  --color-accent: #B45309;
  --color-accent-light: #D97706;
  --color-accent-dark: #92400e;
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-500: #f59e0b;

  /* ========================================
   * NEUTRAL COLORS
   * ======================================== */

  /* Background Colors */
  --color-bg-primary: #F8FAFC;        /* Main background - clean technical */
  --color-bg-secondary: #FFFFFF;      /* Card/content backgrounds */
  --color-bg-tertiary: #F1F5F9;       /* Alternative light background */

  /* Text Colors */
  --color-text-primary: #1F2937;      /* Primary text - dark gray */
  --color-text-secondary: #6B7280;    /* Secondary text - medium gray */
  --color-text-tertiary: #9CA3AF;     /* Tertiary text - light gray */
  --color-text-inverse: #FFFFFF;      /* White text on dark backgrounds */

  /* Border Colors */
  --color-border-light: #E5E7EB;      /* Light borders */
  --color-border-medium: #D1D5DB;     /* Medium borders */
  --color-border-accent: var(--color-primary); /* Accent borders */

  /* ========================================
   * COMPONENT-SPECIFIC COLORS
   * ======================================== */

  /* Header & Navigation */
  --color-header-bg: rgba(71, 85, 105, 0.95);    /* Slate gray with transparency */
  --color-header-border: rgba(15, 118, 110, 0.3); /* Teal accent border */
  --color-nav-link: rgba(255, 255, 255, 0.9);     /* Navigation link color */
  --color-nav-hover: var(--color-accent);         /* Navigation hover - copper */

  /* Footer */
  --color-footer-bg: linear-gradient(135deg, #374151 0%, #1F2937 100%); /* Gray gradient */
  --color-footer-border: 3px solid var(--color-primary); /* Teal top border */
  --color-footer-text: rgba(255, 255, 255, 0.8);  /* Footer text */
  --color-footer-link-hover: var(--color-accent);  /* Footer link hover - copper */

  /* Buttons */
  --color-btn-primary-bg: var(--color-primary);
  --color-btn-primary-hover: var(--color-primary-dark);
  --color-btn-secondary-bg: #F3F4F6;
  --color-btn-secondary-text: #374151;
  --color-btn-accent-bg: var(--color-accent);
  --color-btn-accent-hover: var(--color-accent-dark);

  /* Cards & Components */
  --color-card-bg: var(--color-bg-secondary);
  --color-card-border: var(--color-border-light);
  --color-card-hover-border: var(--color-primary);
  --color-card-shadow: rgba(15, 118, 110, 0.1);

  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-success-text: #065F46;

  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;

  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-error-text: #991B1B;

  /* ========================================
   * INTERACTIVE STATES
   * ======================================== */

  /* Focus States */
  --color-focus-ring: rgba(15, 118, 110, 0.1);
  --color-focus-border: var(--color-primary);

  /* Hover Effects */
  --color-hover-bg: rgba(15, 118, 110, 0.05);
  --color-hover-accent: var(--color-accent-light);

  /* ========================================
   * GRADIENTS
   * ======================================== */

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-hero: linear-gradient(135deg, #0F766E 0%, #475569 35%, #6B7280 70%, #B45309 100%);
  --gradient-card-hover: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  --gradient-footer: var(--color-footer-bg);

  /* ========================================
   * 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-primary: 0 8px 25px var(--color-card-shadow);
}

/* ========================================
 * UTILITY CLASSES FOR QUICK APPLICATION
 * ======================================== */

/* Background Utilities */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-light { background-color: var(--color-bg-primary) !important; }

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-brand { color: var(--color-primary) !important; }

/* Border Utilities */
.border-primary { border-color: var(--color-primary) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.border-light { border-color: var(--color-border-light) !important; }

/* ========================================
 * THEME SWITCHING (Future Enhancement)
 * ======================================== */

/*
 * To change themes in the future:
 * 1. Copy this file to create a new theme (e.g., color-palette-blue.css)
 * 2. Update the CSS custom properties with new colors
 * 3. Import the desired theme file in main.css
 * 4. Components will automatically use the new colors
 *
 * Example alternative themes:
 * - Blue Corporate: Primary #1E3A8A, Accent #F59E0B
 * - Green Tech: Primary #059669, Accent #DC2626
 * - Purple Creative: Primary #7C3AED, Accent #F59E0B
 */

/*
 * IMPLEMENTATION NOTES:
 * =====================
 *
 * 1. All colors in main.css should reference these CSS custom properties
 * 2. Use semantic naming (--color-primary) rather than literal (--color-blue)
 * 3. Include fallback colors for older browser support if needed
 * 4. Test color contrast ratios for accessibility compliance
 * 5. Document any color changes with business reasoning
 *
 * ACCESSIBILITY:
 * - Primary text on light background: 4.5:1 contrast ratio ✓
 * - Secondary text on light background: 4.5:1 contrast ratio ✓
 * - Button text on colored backgrounds: 4.5:1 contrast ratio ✓
 * - Focus indicators clearly visible
 *
 * BRAND ALIGNMENT:
 * - Teal: Modern technology, reliability
 * - Copper: Manufacturing heritage, precision
 * - Gray palette: Professional, industrial
 * - Clean backgrounds: Technical precision, clarity
 */