/* ============================================
   ConformAI Brand Color Fix
   Date: April 3, 2026
   Purpose: Replace incorrect indigo colors with correct navy/orange brand palette
   ============================================ */

/* ============================================
   BRAND COLOR PALETTE (CORRECTED)
   ============================================ */

:root {
    /* Primary Colors */
    --color-navy: #2c3e50;        /* Primary brand color - Navy */
    --color-orange: #e17055;      /* Accent color - Orange */
    --color-dark: #1a1a2e;        /* Dark/secondary color */

    /* Neutrals */
    --color-white: #ffffff;
    --color-light-gray: #f9fafb;
    --color-gray: #6b7280;
    --color-dark-gray: #1f2937;

    /* Status Colors */
    --color-success: #059669;      /* Green */
    --color-warning: #f59e0b;      /* Amber */
    --color-error: #dc2626;        /* Red */
    --color-info: #3b82f6;         /* Blue */

    /* Deprecated Colors - DO NOT USE */
    /* --color-indigo: #4338CA;    WRONG - Remove from codebase */
    /* --color-indigo-light: #6366F1;  WRONG - Remove from codebase */
}

/* ============================================
   GLOBAL COLOR REPLACEMENTS
   ============================================ */

/* Replace all Indigo (#4338CA) with Navy (#2c3e50) */
/* Replace all Indigo Light (#6366F1) with Navy + Opacity or Orange accent */
/* Replace other indigo variants with appropriate navy/orange alternatives */

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

header {
    background-color: var(--color-navy) !important;
    border-bottom: 4px solid var(--color-orange) !important;
}

header h1,
header h2,
header h3 {
    color: var(--color-white) !important;
}

nav {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

nav a {
    color: var(--color-navy) !important;
    transition: color 0.3s ease;
}

nav a:hover,
nav a.active {
    color: var(--color-orange) !important;
}

/* ============================================
   BUTTONS & CTA
   ============================================ */

/* Primary Button - Navy with Orange hover */
.btn-primary,
button[class*="primary"],
a[class*="primary-btn"],
.cta-button {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-navy) !important;
    transition: all 0.3s ease;
}

.btn-primary:hover,
button[class*="primary"]:hover,
a[class*="primary-btn"]:hover,
.cta-button:hover {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    cursor: pointer;
}

/* Secondary Button - Orange with Navy hover */
.btn-secondary,
button[class*="secondary"],
a[class*="secondary-btn"] {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-orange) !important;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
button[class*="secondary"]:hover,
a[class*="secondary-btn"]:hover {
    background-color: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* Outline Button - Navy outline */
.btn-outline,
button[class*="outline"],
a[class*="outline-btn"] {
    background-color: transparent !important;
    color: var(--color-navy) !important;
    border: 2px solid var(--color-navy) !important;
    transition: all 0.3s ease;
}

.btn-outline:hover,
button[class*="outline"]:hover,
a[class*="outline-btn"]:hover {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 0 3px rgba(225, 112, 85, 0.1) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--color-orange) !important;
}

label {
    color: var(--color-navy) !important;
}

/* ============================================
   HEADINGS & TEXT
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-navy) !important;
}

h1:hover, h2:hover, h3:hover {
    color: var(--color-orange) !important;
}

/* Highlight/Accent text */
strong, b, .accent {
    color: var(--color-dark) !important;
    font-weight: 600;
}

.text-orange,
.accent-orange {
    color: var(--color-orange) !important;
}

.text-navy,
.accent-navy {
    color: var(--color-navy) !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card {
    background-color: var(--color-white) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    border-bottom: 2px solid var(--color-orange) !important;
}

.card-title {
    color: var(--color-navy) !important;
}

/* Highlight/Alert boxes */
.highlight-box,
.alert-info {
    background-color: #f0f7ff !important;
    border-left: 4px solid var(--color-orange) !important;
}

.alert-success {
    background-color: #ecfdf5 !important;
    border-left: 4px solid var(--color-success) !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-left: 4px solid var(--color-warning) !important;
}

.alert-error {
    background-color: #fef2f2 !important;
    border-left: 4px solid var(--color-error) !important;
}

/* ============================================
   LINKS & ANCHORS
   ============================================ */

a {
    color: var(--color-orange) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-navy) !important;
    text-decoration: underline;
}

a:visited {
    color: #a86e3a !important; /* Darkened orange for visited */
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    background-color: var(--color-dark) !important;
    color: var(--color-white) !important;
    border-top: 4px solid var(--color-orange) !important;
}

footer a {
    color: var(--color-orange) !important;
}

footer a:hover {
    color: var(--color-white) !important;
    text-decoration: underline;
}

/* ============================================
   NAVBAR/SIDEBAR
   ============================================ */

.navbar,
.sidebar {
    background-color: var(--color-navy) !important;
}

.navbar-item,
.sidebar-item {
    color: var(--color-white) !important;
}

.navbar-item:hover,
.sidebar-item:hover,
.navbar-item.active,
.sidebar-item.active {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-orange {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

.badge-outline {
    background-color: transparent !important;
    border: 1px solid var(--color-navy) !important;
    color: var(--color-navy) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress-bar,
progress {
    background-color: var(--color-light-gray) !important;
}

.progress-bar-value,
progress::-webkit-progress-value {
    background-color: var(--color-orange) !important;
}

.progress-bar-value::-moz-progress-bar {
    background-color: var(--color-orange) !important;
}

/* ============================================
   TABS & NAVIGATION TABS
   ============================================ */

.tab-list {
    border-bottom: 2px solid #e0e0e0 !important;
}

.tab-button {
    color: var(--color-navy) !important;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-button:hover,
.tab-button.active {
    color: var(--color-orange) !important;
    border-bottom-color: var(--color-orange) !important;
}

/* ============================================
   MODALS & DIALOGS
   ============================================ */

.modal {
    background-color: var(--color-white) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    border-bottom: 2px solid var(--color-orange) !important;
}

.modal-close {
    color: var(--color-navy) !important;
    font-size: 24px;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--color-orange) !important;
}

/* ============================================
   PRICING TABLE
   ============================================ */

.pricing-table {
    background-color: var(--color-light-gray) !important;
    border-radius: 8px;
}

.pricing-table th {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

.pricing-highlighted {
    border: 2px solid var(--color-orange) !important;
    box-shadow: 0 4px 12px rgba(225, 112, 85, 0.15) !important;
}

.pricing-highlighted .pricing-table th {
    background-color: var(--color-orange) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.bg-navy {
    background-color: var(--color-navy) !important;
}

.bg-orange {
    background-color: var(--color-orange) !important;
}

.bg-dark {
    background-color: var(--color-dark) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.border-navy {
    border-color: var(--color-navy) !important;
}

.border-orange {
    border-color: var(--color-orange) !important;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   HOVER & TRANSITION EFFECTS
   ============================================ */

.hover-navy:hover {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    transition: all 0.3s ease;
}

.hover-orange:hover {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    transition: all 0.3s ease;
}