/**
 * AISEN Color Palette - Databricks Aligned Theme
 * ================================================
 *
 * Target Audience: Data, AI, and Enterprise sectors
 * Theme Philosophy: Modern, data-forward, professional with warm undertones
 *
 * Color Psychology:
 * - Red-Orange: Energy, action, innovation
 * - Gable Green: Trust, stability, professionalism
 * - Spring Wood: Warmth, approachability, clarity
 * - Documentation Blue: Technical precision, reliability
 */

:root {
  /* ========================================
   * PRIMARY BRAND COLORS (Databricks)
   * ======================================== */

  /* Primary Red-Orange - Databricks accent */
  --color-primary: #FF3621;
  --color-primary-light: #FF6B57;
  --color-primary-dark: #CC2B1A;
  --color-primary-50: #FFF5F4;
  --color-primary-100: #FFE5E2;
  --color-primary-500: #FF3621;
  --color-primary-900: #7A1A0F;

  /* Secondary Gable Green - Dark tones */
  --color-secondary: #1B3139;
  --color-secondary-light: #2D4A54;
  --color-secondary-dark: #0F1E23;
  --color-secondary-50: #F4F6F7;
  --color-secondary-100: #E8ECEE;
  --color-secondary-500: #1B3139;
  --color-secondary-900: #0A1215;

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

  /* Documentation Blue - for secondary actions */
  --color-accent: #2272B4;
  --color-accent-light: #3B8BC7;
  --color-accent-dark: #1A5A8F;
  --color-accent-50: #EFF7FC;
  --color-accent-100: #D9EBF7;
  --color-accent-500: #2272B4;

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

  /* Background Colors */
  --color-bg-primary: #F9F7F4;        /* Spring Wood - main background */
  --color-bg-secondary: #FFFFFF;      /* White - card backgrounds */
  --color-bg-tertiary: #F4F2EF;       /* Slightly darker warm white */
  --color-bg-dark: #1B3139;           /* Gable Green for dark sections */

  /* Text Colors */
  --color-text-primary: #1B3139;      /* Gable Green - primary text */
  --color-text-secondary: #4A5D66;    /* Lighter variant */
  --color-text-tertiary: #7A8D96;     /* Even lighter */
  --color-text-inverse: #FFFFFF;      /* White text on dark backgrounds */

  /* Border Colors */
  --color-border-light: #E5E2DF;      /* Warm light border */
  --color-border-medium: #CCC9C4;     /* Medium warm border */
  --color-border-accent: var(--color-primary);

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

  /* Header & Navigation */
  --color-header-bg: #1B3139;
  --color-header-border: rgba(255, 54, 33, 0.3);
  --color-nav-link: rgba(255, 255, 255, 0.9);
  --color-nav-hover: var(--color-primary);

  /* Footer */
  --color-footer-bg: #1B3139;
  --color-footer-border: 3px solid var(--color-primary);
  --color-footer-text: rgba(255, 255, 255, 0.8);
  --color-footer-link-hover: var(--color-primary);

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

  /* Cards */
  --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(27, 49, 57, 0.1);

  /* Status Colors */
  --color-success: #048C5C;
  --color-success-bg: #E5F7F0;
  --color-success-text: #036344;

  --color-warning: #F89406;
  --color-warning-bg: #FEF5E7;
  --color-warning-text: #A66104;

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

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

  --color-focus-ring: rgba(255, 54, 33, 0.15);
  --color-focus-border: var(--color-primary);
  --color-hover-bg: rgba(255, 54, 33, 0.05);
  --color-hover-accent: var(--color-primary-light);

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

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-hero: linear-gradient(135deg, #FF3621 0%, #1B3139 100%);
  --gradient-card-hover: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  --gradient-footer: var(--color-secondary);

  /* ========================================
   * SHADOWS
   * ======================================== */

  --shadow-sm: 0 1px 2px rgba(27, 49, 57, 0.05);
  --shadow-md: 0 4px 6px rgba(27, 49, 57, 0.1);
  --shadow-lg: 0 10px 15px rgba(27, 49, 57, 0.1);
  --shadow-xl: 0 20px 25px rgba(27, 49, 57, 0.1);
  --shadow-primary: 0 8px 25px rgba(255, 54, 33, 0.15);
}

/* ========================================
 * 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 (Databricks-inspired):
 * - Red-Orange: Energy, action, innovation
 * - Gable Green: Trust, stability, professionalism
 * - Spring Wood: Warmth, approachability
 * - Documentation Blue: Technical precision
 */