/**
 * Brand Colors - CSS Custom Properties
 *
 * IMPORTANT: These values mirror Imagile.App.Domain.Design.BrandColors.cs
 * Keep both files in sync when updating brand colors.
 *
 * Primary palette uses the bold orange from Imagile.dev (Dotcom site)
 */

:root {
    /* Primary Colors - Bold Orange (from Dotcom) */
    --brand-primary-light: #FF8C33;
    --brand-primary-main: #FF6B00;
    --brand-primary-dark: #CC5500;
    --brand-primary-darker: #A34400;

    /* Secondary Colors - Complementary Deep Blue */
    --brand-secondary-light: #4A90E2;
    --brand-secondary-main: #2E5C8A;
    --brand-secondary-dark: #1A3A5C;
    --brand-secondary-darker: #0F2540;

    /* Accent Colors - Modern & Vibrant */
    --brand-accent-teal-light: #00FFD1;
    --brand-accent-teal-main: #00D4AA;
    --brand-accent-teal-dark: #00A885;

    --brand-accent-coral-light: #FF9980;
    --brand-accent-coral-main: #FF6B52;
    --brand-accent-coral-dark: #E64A2E;

    --brand-accent-amber-light: #FFB84D;
    --brand-accent-amber-main: #FF9500;
    --brand-accent-amber-dark: #CC7700;

    /* Neutral Colors - Modern Grays */
    --brand-neutral-white: #FFFFFF;
    --brand-neutral-gray-50: #F9FAFB;
    --brand-neutral-gray-100: #F3F4F6;
    --brand-neutral-gray-200: #E5E7EB;
    --brand-neutral-gray-300: #D1D5DB;
    --brand-neutral-gray-400: #9CA3AF;
    --brand-neutral-gray-500: #6B7280;
    --brand-neutral-gray-600: #4B5563;
    --brand-neutral-gray-700: #374151;
    --brand-neutral-gray-800: #1F2937;
    --brand-neutral-gray-900: #111827;
    --brand-neutral-black: #000000;

    /* Semantic Colors */
    --brand-success-light: #4ADE80;
    --brand-success-main: #22C55E;
    --brand-success-dark: #16A34A;

    --brand-warning-light: #FBBF24;
    --brand-warning-main: #F59E0B;
    --brand-warning-dark: #D97706;

    --brand-error-light: #F87171;
    --brand-error-main: #EF4444;
    --brand-error-dark: #DC2626;

    --brand-info-light: #22D3EE;
    --brand-info-main: #06B6D4;
    --brand-info-dark: #0891B2;

    /* Gradients - Orange & Secondary Focused */
    --brand-gradient-primary: linear-gradient(135deg, #FF6B00 0%, #CC5500 100%);
    --brand-gradient-primary-warm: linear-gradient(135deg, #FF8C33 0%, #FF6B00 100%);
    --brand-gradient-orange-amber: linear-gradient(135deg, #FF6B00 0%, #FF9500 100%);
    --brand-gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%);
    --brand-gradient-dark-warm: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
    --brand-gradient-accent: linear-gradient(135deg, #FF6B00 0%, #00D4AA 100%);
}