/**
 * Brand Color System for IAS and Product Lines
 * ==============================================
 * This file defines a scalable color system using CSS custom properties
 * following DRY principles for easy maintenance and brand consistency.
 */

/* ========================================
   ROOT COLOR DEFINITIONS
   ======================================== */

:root {
  /* Clean Professional Brand Colors (OPS Application Theme) */
  --ias-primary: #2563eb;        /* Professional Blue */
  --ias-primary-dark: #1d4ed8;   /* Darker shade for hover states */
  --ias-primary-light: #3b82f6;  /* Lighter shade */
  --ias-secondary: #64748b;      /* Professional Slate Gray */
  --ias-secondary-dark: #525252;
  --ias-secondary-light: #94a3b8;
  --ias-accent: #22c55e;         /* Clean Success Green */
  --ias-accent-dark: #16a34a;
  --ias-accent-light: #4ade80;

  /* READY HUB Product Colors (Official Brand Colors) */
  --readyhub-primary: #1a9988;   /* Teal - Main brand color | NOTE: Also update theme-color meta tag in HTML */
  --readyhub-primary-dark: #158276;
  --readyhub-primary-light: #1a99887c;
  --readyhub-secondary: #64748b;  /* Medium Slate - Secondary brand */
  --readyhub-accent: #212121;     /* Dark Gray - Accent color */

  /* READY HUB Module-Specific Colors (Official Product Colors) */
  --readyhub-inventory: #1a6b99;  /* Blue - Inventory module */
  --readyhub-trade: #6e5095;      /* Purple - Trade module */
  --readyhub-deliveries: #1a9988; /* Teal - Delivery module */

  /* Module color variations for states */
  --readyhub-inventory-dark: #155580;
  --readyhub-inventory-light: #1a6b9968;
  --readyhub-trade-dark: #5a4078;
  --readyhub-trade-light: #6e50957c;
  --readyhub-deliveries-dark: #158276;
  --readyhub-deliveries-light: #1a99887c;


  /* Semantic Color Mappings (Default to READY HUB Dark Gray for Buttons) */
  --brand-primary: var(--readyhub-accent);        /* Dark Gray #212121 for buttons */
  --brand-primary-dark: #171717;                  /* Darker gray for hover */
  --brand-primary-light: #525252;                 /* Lighter gray */
  --brand-secondary: var(--readyhub-secondary);   /* Medium slate */
  --brand-secondary-dark: var(--neutral-gray-700);
  --brand-secondary-light: var(--neutral-gray-400);
  --brand-accent: var(--readyhub-primary);        /* Teal #1a9988 for highlights */
  --brand-accent-dark: var(--readyhub-primary-dark);
  --brand-accent-light: var(--readyhub-primary-light);

  /* SR Framework Color Mappings for Compatibility */
  --sr-primary: var(--brand-primary);
  --sr-secondary: var(--brand-secondary);
  --sr-accent: var(--brand-accent);

  /* Neutral Colors (True Gray System - no blue tint) */
  --neutral-white: #ffffff;
  --neutral-gray-50: #fafafa;
  --neutral-gray-100: #f5f5f5;
  --neutral-gray-200: #e5e5e5;
  --neutral-gray-300: #d4d4d4;
  --neutral-gray-400: #a3a3a3;
  --neutral-gray-500: #737373;
  --neutral-gray-600: #525252;
  --neutral-gray-700: #404040;
  --neutral-gray-800: #262626;
  --neutral-gray-900: #171717;
  --neutral-black: #000000;

  /* Semantic Status Colors (Shared) */
  --status-success: #22c55e;
  --status-warning: #ffc107;
  --status-danger: #dc3545;
  --status-info: #17a2b8;

  /* SR Gray Mappings for Compatibility */
  --sr-gray-100: var(--neutral-gray-100);
  --sr-gray-200: var(--neutral-gray-200);
  --sr-gray-300: var(--neutral-gray-300);
  --sr-gray-400: var(--neutral-gray-400);
  --sr-gray-500: var(--neutral-gray-500);
  --sr-gray-600: var(--neutral-gray-600);
  --sr-gray-700: var(--neutral-gray-700);
  --sr-gray-800: var(--neutral-gray-800);
  --sr-gray-900: var(--neutral-gray-900);
}

/* ========================================
   PRODUCT-SPECIFIC COLOR SCHEMES
   Use data attributes on body/html to switch
   ======================================== */

/* READY HUB Color Scheme */
[data-brand="readyhub"] {
  --brand-primary: var(--readyhub-primary);
  --brand-primary-dark: var(--readyhub-primary-dark);
  --brand-primary-light: var(--readyhub-primary-light);
  --brand-secondary: var(--readyhub-secondary);
  --brand-accent: var(--readyhub-accent);

  --sr-primary: var(--readyhub-primary);
  --sr-secondary: var(--readyhub-secondary);
  --sr-accent: var(--readyhub-accent);
}


/* ========================================
   UTILITY CLASSES FOR COLORS
   ======================================== */

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

/* IAS Specific Text Colors */
.text-ias-primary { color: var(--ias-primary) !important; }
.text-ias-secondary { color: var(--ias-secondary) !important; }
.text-ias-accent { color: var(--ias-accent) !important; }

/* Product Specific Text Colors */
.text-readyhub-primary { color: var(--readyhub-primary) !important; }
.text-readyhub-inventory { color: var(--readyhub-inventory) !important; }
.text-readyhub-trade { color: var(--readyhub-trade) !important; }
.text-readyhub-deliveries { color: var(--readyhub-deliveries) !important; }

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

/* READY HUB Module backgrounds */
.bg-readyhub-inventory { background-color: var(--readyhub-inventory) !important; }
.bg-readyhub-trade { background-color: var(--readyhub-trade) !important; }
.bg-readyhub-deliveries { background-color: var(--readyhub-deliveries) !important; }

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

/* Extended Border-Left Classes */
.border-left-brand-primary {
  border-left: 4px solid var(--brand-primary) !important;
}

.border-left-brand-secondary {
  border-left: 4px solid var(--brand-secondary) !important;
}

.border-left-brand-accent {
  border-left: 4px solid var(--brand-accent) !important;
}

/* Product Specific Border-Left Classes */
.border-left-readyhub {
  border-left: 4px solid var(--readyhub-primary) !important;
}

/* READY HUB Module-specific borders */
.border-left-readyhub-inventory {
  border-left: 4px solid var(--readyhub-inventory) !important;
}

.border-left-readyhub-trade {
  border-left: 4px solid var(--readyhub-trade) !important;
}

.border-left-readyhub-deliveries {
  border-left: 4px solid var(--readyhub-deliveries) !important;
}


/* ========================================
   COMPONENT COLOR OVERRIDES
   ======================================== */

/* Hero Section with Brand Colors */
.sr-hero {
  background: linear-gradient(135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%);
}

/* Buttons with Brand Colors */
.cta_button {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.cta_button:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

/* Secondary Button Variant */
.btn-wrapper.btn-secondary-wrapper .cta_button {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-wrapper.btn-secondary-wrapper .cta_button:hover {
  background-color: var(--brand-secondary-dark);
  border-color: var(--brand-secondary-dark);
}

/* Accent Button Variant */
.btn-wrapper.btn-accent-wrapper .cta_button {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

.btn-wrapper.btn-accent-wrapper .cta_button:hover {
  background-color: var(--brand-accent-dark);
  border-color: var(--brand-accent-dark);
}

/* Outline Button Variants */
.btn-wrapper.btn-outline-primary-wrapper .cta_button {
  background-color: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-wrapper.btn-outline-primary-wrapper .cta_button:hover {
  background-color: var(--brand-primary);
  color: white;
}

.btn-wrapper.btn-outline-secondary-wrapper .cta_button {
  background-color: transparent;
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-wrapper.btn-outline-secondary-wrapper .cta_button:hover {
  background-color: var(--brand-secondary);
  color: white;
}

/* ========================================
   GRADIENT UTILITIES
   ======================================== */

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

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

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

/* Three-color gradient using all READY HUB module colors */
.gradient-readyhub-modules {
  background: linear-gradient(135deg,
    var(--readyhub-inventory) 0%,
    var(--readyhub-trade) 50%,
    var(--readyhub-deliveries) 100%);
}


/* ========================================
   HOVER STATE UTILITIES
   ======================================== */

.hover-brand-primary:hover { color: var(--brand-primary) !important; }
.hover-bg-brand-primary:hover { background-color: var(--brand-primary) !important; }
.hover-border-brand-primary:hover { border-color: var(--brand-primary) !important; }

/* ========================================
   USAGE EXAMPLES
   ========================================

   1. Set brand for entire page:
      <body data-brand="readyhub">

   2. Use brand colors in components:
      <div class="text-brand-primary">Branded text</div>
      <button class="bg-brand-primary">Branded button</button>

   3. Use specific product colors:
      <span class="text-readyhub-primary">READY HUB branded</span>

   4. Mix IAS and product colors:
      <div class="bg-ias-primary text-readyhub-accent">Mixed branding</div>

   ======================================== */