/* ═══════════════════════════════════════════════════════════════════════════════
   CC-BRANDING.CSS — Centralized Branding Design System for CCloud / TalentIO
   ═══════════════════════════════════════════════════════════════════════════════
   
   PURPOSE:
   Single source of truth for ALL brand-related colors across every CCloud page.
   Uses CSS custom properties set dynamically from org branding settings.
   
   USAGE:
   Instead of hardcoded Tailwind colors (bg-indigo-600, text-blue-500) or
   hex values (#4f46e5, #0083ff), use the brand utility classes below.
   
   CSS VARIABLES (set by brandingLoader.js / ccBrandingLoader.js):
     --cc-brand-primary     Main brand color (sidebar bg, primary buttons)
     --cc-brand-secondary   Secondary brand color (gradients, deep accents)
     --cc-brand-accent      Accent color (highlights, badges, CTAs)
     --cc-sidebar-bg        Sidebar background (may be gradient)
     --cc-sidebar-text      Sidebar text/icon color
     --cc-sidebar-active    Sidebar active item highlight
     --cc-banner-gradient-start  Banner gradient start
     --cc-banner-gradient-end    Banner gradient end
   
   QUICK REFERENCE — Class → CSS Variable mapping:
   ┌─────────────────────────────┬──────────────────────────────────────────┐
   │ Class                       │ Maps to                                  │
   ├─────────────────────────────┼──────────────────────────────────────────┤
   │ .brand-bg                   │ --cc-brand-primary (solid)               │
   │ .brand-bg-secondary         │ --cc-brand-secondary (solid)             │
   │ .brand-bg-accent            │ --cc-brand-accent (solid)                │
   │ .brand-text                 │ --cc-brand-primary                       │
   │ .brand-border               │ --cc-brand-primary                       │
   │ .brand-btn                  │ gradient primary→secondary               │
   │ .brand-btn-outline          │ transparent + primary border             │
   │ .brand-banner               │ banner gradient start→end                │
   │ .brand-progress             │ primary background on bar fill           │
   │ .brand-badge                │ primary bg + white text                  │
   │ .brand-link                 │ primary text + hover underline           │
   │ .brand-ring                 │ primary focus ring                       │
   │ .brand-card-header          │ subtle primary tint background           │
   │ .brand-tab-active           │ primary bg, white text, shadow           │
   │ .brand-stat                 │ primary text for stat numbers            │
   └─────────────────────────────┴──────────────────────────────────────────┘
   
   FILE HISTORY:
   Created: 2026-04-27 — Extracted from _ccmasterLayout.cshtml inline styles
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLE DEFAULTS (overridden by brandingLoader / ccBrandingLoader)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --cc-brand-primary:   #4f46e5;
    --cc-brand-secondary: #312e81;
    --cc-brand-accent:    #f59e0b;
    --cc-sidebar-bg:      #4f46e5;
    --cc-sidebar-text:    #e2e8f0;
    --cc-sidebar-active:  #f59e0b;
    --cc-banner-gradient-start: var(--cc-brand-primary);
    --cc-banner-gradient-end:   var(--cc-brand-secondary);
    --cc-banner-gradient-angle: 135deg;

    /* Derived shades (auto-computed via color-mix) */
    --cc-brand-primary-light: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent);
    --cc-brand-primary-hover: color-mix(in srgb, var(--cc-brand-primary) 85%, black);
    --cc-brand-primary-ring:  color-mix(in srgb, var(--cc-brand-primary) 40%, transparent);
    --cc-brand-primary-shadow: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent);
    --cc-brand-accent-light:  color-mix(in srgb, var(--cc-brand-accent) 15%, transparent);

    /* Functional colors (these stay constant regardless of brand) */
    --cc-success: #10b981;
    --cc-success-light: #d1fae5;
    --cc-danger:  #ef4444;
    --cc-danger-light: #fee2e2;
    --cc-warning: #f59e0b;
    --cc-warning-light: #fef3c7;
    --cc-info:    #3b82f6;
    --cc-info-light: #dbeafe;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. BACKGROUND UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Solid backgrounds */
.brand-bg,
.bg-brand-primary          { background-color: var(--cc-brand-primary) !important; }
.brand-bg-secondary,
.bg-brand-secondary        { background-color: var(--cc-brand-secondary) !important; }
.brand-bg-accent,
.bg-brand-accent           { background-color: var(--cc-brand-accent) !important; }

/* Tinted backgrounds (for cards, badges, alerts) */
.brand-bg-tint,
.bg-brand-primary\/10      { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.bg-brand-primary\/15      { background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.bg-brand-primary\/20      { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.bg-brand-primary\/5       { background-color: color-mix(in srgb, var(--cc-brand-primary) 5%, transparent) !important; }
.bg-brand-primary\/8       { background-color: color-mix(in srgb, var(--cc-brand-primary) 8%, transparent) !important; }
.bg-brand-primary\/25      { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }
.bg-brand-primary\/30      { background-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.bg-brand-primary\/80      { background-color: color-mix(in srgb, var(--cc-brand-primary) 80%, transparent) !important; }
.bg-brand-secondary\/10    { background-color: color-mix(in srgb, var(--cc-brand-secondary) 10%, transparent) !important; }
.bg-brand-secondary\/15    { background-color: color-mix(in srgb, var(--cc-brand-secondary) 15%, transparent) !important; }
.bg-brand-secondary\/20    { background-color: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; }
.bg-brand-accent\/15       { background-color: color-mix(in srgb, var(--cc-brand-accent) 15%, transparent) !important; }

/* Solid backgrounds (no gradients — single color) */
.brand-gradient,
.bg-brand-gradient         { background-color: var(--cc-brand-primary) !important; }
.bg-brand-gradient-lr      { background-color: var(--cc-brand-primary) !important; }
.bg-brand-gradient-accent  { background-color: var(--cc-brand-primary) !important; }

/* Gradient via / from / to utilities */
.from-brand-primary        { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-brand-secondary      { --tw-gradient-from: var(--cc-brand-secondary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-brand-primary         { --tw-gradient-via: var(--cc-brand-primary) !important; }
.via-brand-secondary       { --tw-gradient-via: var(--cc-brand-secondary) !important; }
.to-brand-primary          { --tw-gradient-to: var(--cc-brand-primary) !important; }
.to-brand-secondary        { --tw-gradient-to: var(--cc-brand-secondary) !important; }
.from-brand-primary\/5     { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 5%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-brand-primary\/10    { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-brand-primary\/20    { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-brand-secondary\/20  { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-brand-primary\/5       { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 5%, transparent) !important; }
.to-brand-primary\/10      { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.to-brand-primary\/15      { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.to-brand-primary\/20      { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.to-brand-secondary\/5     { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 5%, transparent) !important; }
.to-brand-secondary\/10    { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 10%, transparent) !important; }
.to-brand-secondary\/15    { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 15%, transparent) !important; }
.to-brand-secondary\/20    { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; }

/* Functional backgrounds */
.brand-bg-success          { background-color: var(--cc-success) !important; }
.brand-bg-danger           { background-color: var(--cc-danger) !important; }
.brand-bg-warning          { background-color: var(--cc-warning) !important; }
.brand-bg-info             { background-color: var(--cc-info) !important; }
.brand-bg-success-light    { background-color: var(--cc-success-light) !important; }
.brand-bg-danger-light     { background-color: var(--cc-danger-light) !important; }
.brand-bg-warning-light    { background-color: var(--cc-warning-light) !important; }
.brand-bg-info-light       { background-color: var(--cc-info-light) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   3. TEXT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-text,
.text-brand-primary        { color: var(--cc-brand-primary) !important; }
.text-brand-secondary      { color: var(--cc-brand-secondary) !important; }
.text-brand-accent         { color: var(--cc-brand-accent) !important; }
.text-brand-primary\/70    { color: color-mix(in srgb, var(--cc-brand-primary) 70%, transparent) !important; }
.text-brand-primary\/80    { color: color-mix(in srgb, var(--cc-brand-primary) 80%, transparent) !important; }

/* Functional text */
.brand-text-success        { color: var(--cc-success) !important; }
.brand-text-danger         { color: var(--cc-danger) !important; }
.brand-text-warning        { color: var(--cc-warning) !important; }
.brand-text-info           { color: var(--cc-info) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   4. BORDER UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-border,
.border-brand-primary      { border-color: var(--cc-brand-primary) !important; }
.border-brand-secondary    { border-color: var(--cc-brand-secondary) !important; }
.border-brand-accent       { border-color: var(--cc-brand-accent) !important; }
.border-brand-primary\/10  { border-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.border-brand-primary\/20  { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.border-brand-primary\/30  { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.border-brand-primary\/40  { border-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.border-brand-secondary\/20 { border-color: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; }
.focus\:border-brand-primary:focus { border-color: var(--cc-brand-primary) !important; }

/* Functional borders */
.brand-border-success      { border-color: var(--cc-success) !important; }
.brand-border-danger       { border-color: var(--cc-danger) !important; }
.brand-border-warning      { border-color: var(--cc-warning) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   5. RING / FOCUS UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-ring,
.ring-brand-primary                { --tw-ring-color: var(--cc-brand-primary) !important; }
.ring-brand-primary\/30            { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.focus\:ring-brand-primary:focus   { --tw-ring-color: var(--cc-brand-primary) !important; }
.focus\:ring-brand-primary\/20:focus { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.focus\:ring-brand-primary\/30:focus { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.focus\:ring-brand-primary\/40:focus { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   6. HOVER / INTERACTION STATES
   ═══════════════════════════════════════════════════════════════════════════════ */
.hover\:bg-brand-primary:hover      { background-color: var(--cc-brand-primary) !important; }
.hover\:bg-brand-primary\/80:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 80%, black) !important; }
.hover\:bg-brand-primary\/10:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.hover\:bg-brand-primary\/15:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.hover\:bg-brand-primary\/25:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }
.hover\:bg-brand-primary\/90:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 90%, transparent) !important; }
.hover\:text-brand-primary:hover    { color: var(--cc-brand-primary) !important; }
.hover\:border-brand-primary:hover  { border-color: var(--cc-brand-primary) !important; }
.hover\:border-brand-primary\/20:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.hover\:border-brand-primary\/30:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.hover\:border-brand-primary\/40:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.hover\:border-brand-primary\/50:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 50%, transparent) !important; }
.hover\:border-brand-secondary:hover   { border-color: var(--cc-brand-secondary) !important; }
.hover\:from-brand-primary:hover    { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.hover\:to-brand-primary:hover      { --tw-gradient-to: var(--cc-brand-primary) !important; }
.hover\:to-brand-secondary:hover    { --tw-gradient-to: var(--cc-brand-secondary) !important; }
.hover\:shadow-brand-primary:hover  { box-shadow: 0 4px 14px -2px var(--cc-brand-primary-shadow) !important; }

/* Group-hover variants */
.group:hover .group-hover\:bg-brand-primary         { background-color: var(--cc-brand-primary) !important; }
.group:hover .group-hover\:bg-brand-primary\/10     { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.group:hover .group-hover\:bg-brand-primary\/80     { background-color: color-mix(in srgb, var(--cc-brand-primary) 80%, transparent) !important; }
.group:hover .group-hover\:bg-brand-secondary       { background-color: var(--cc-brand-secondary) !important; }
.group:hover .group-hover\:bg-brand-secondary\/80   { background-color: color-mix(in srgb, var(--cc-brand-secondary) 80%, transparent) !important; }
.group:hover .group-hover\:text-brand-primary       { color: var(--cc-brand-primary) !important; }
.group:hover .group-hover\:ring-brand-primary       { --tw-ring-color: var(--cc-brand-primary) !important; }
.group:hover .group-hover\:ring-brand-primary\/30   { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.group:hover .group-hover\:from-brand-primary       { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.group:hover .group-hover\:to-brand-primary\/20     { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }

/* has-[:checked] variants (used in radio/checkbox card selections) */
.has-\[\:checked\]\:border-brand-primary:has(:checked)  { border-color: var(--cc-brand-primary) !important; }
.has-\[\:checked\]\:bg-gradient-to-r:has(:checked)      { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
.has-\[\:checked\]\:from-brand-primary:has(:checked)    { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.has-\[\:checked\]\:to-brand-primary\/10:has(:checked)  { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.dark .dark\:has-\[\:checked\]\:from-brand-primary:has(:checked)   { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:has-\[\:checked\]\:to-brand-secondary\/20:has(:checked) { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   7. SHADOW UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-shadow,
.shadow-brand-primary      { box-shadow: 0 4px 14px -2px var(--cc-brand-primary-shadow) !important; }
.shadow-brand-primary-sm   { box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Primary solid button (single color, no gradient) */
.brand-btn,
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--cc-brand-primary);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 8px -1px var(--cc-brand-primary-shadow);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn:hover,
.btn-brand:hover {
    background-color: var(--cc-brand-primary-hover);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 45%, transparent);
    color: #fff !important;
    text-decoration: none !important;
}

/* Solid primary button (no gradient) */
.brand-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--cc-brand-primary);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 8px -1px var(--cc-brand-primary-shadow);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn-solid:hover {
    background-color: var(--cc-brand-primary-hover);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 45%, transparent);
    color: #fff !important;
}

/* Outline button */
.brand-btn-outline,
.btn-brand-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cc-brand-primary) !important;
    border: 1.5px solid var(--cc-brand-primary);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn-outline:hover,
.btn-brand-outline:hover {
    background: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent);
    text-decoration: none !important;
}

/* Ghost button (text-only) */
.brand-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cc-brand-primary) !important;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.brand-btn-ghost:hover {
    background: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent);
}

/* Small button variant */
.brand-btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
}

/* Functional buttons */
.brand-btn-success { background: var(--cc-success) !important; color: #fff !important; border: none; }
.brand-btn-success:hover { background: color-mix(in srgb, var(--cc-success) 85%, black) !important; }
.brand-btn-danger  { background: var(--cc-danger) !important;  color: #fff !important; border: none; }
.brand-btn-danger:hover  { background: color-mix(in srgb, var(--cc-danger) 85%, black) !important; }

/* Dark mode button overrides */
.dark .brand-btn-outline,
.dark .btn-brand-outline   { color: color-mix(in srgb, var(--cc-brand-primary) 80%, white) !important; border-color: color-mix(in srgb, var(--cc-brand-primary) 80%, white); }
.dark .brand-btn-ghost     { color: color-mix(in srgb, var(--cc-brand-primary) 80%, white) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   9. BANNERS & STATS HEADERS
   ═══════════════════════════════════════════════════════════════════════════════
   Two banner styles:
     A) "Card banner" — clean white card with brand-colored accents (light mode friendly)
     B) "Gradient banner" — rich brand gradient for hero sections
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ---- A) Clean card banner ---- */
.brand-card-banner {
    background:
        linear-gradient(155deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, transparent 70%),
        linear-gradient(
            var(--cc-banner-gradient-angle, 135deg),
            var(--cc-banner-gradient-start, var(--cc-brand-primary, #2563eb)),
            var(--cc-banner-gradient-end, var(--cc-brand-primary, #2563eb))
        );
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.15);
    color: #fff;
}
.brand-card-banner h1,
.brand-card-banner .text-gray-900 {
    color: #fff !important;
}
.brand-card-banner .text-gray-500,
.brand-card-banner .text-gray-400,
.brand-card-banner p {
    color: rgba(255,255,255,0.75) !important;
}
.brand-card-banner .border-gray-100 {
    border-color: rgba(255,255,255,0.15) !important;
}
.brand-card-banner .hover\:bg-gray-50\/60:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* Brand icon box — translucent white on brand background */
.brand-icon-box {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Stat icon boxes inside brand banner — override hardcoded Tailwind colors */
.brand-card-banner [class*="bg-blue-50"],
.brand-card-banner [class*="bg-emerald-50"],
.brand-card-banner [class*="bg-violet-50"],
.brand-card-banner [class*="bg-amber-50"],
.brand-card-banner [class*="bg-red-50"],
.brand-card-banner [class*="bg-green-50"],
.brand-card-banner [class*="bg-purple-50"],
.brand-card-banner [class*="bg-indigo-50"],
.brand-card-banner [class*="bg-orange-50"],
.brand-card-banner [class*="bg-yellow-50"] {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Stat icon text colors inside brand banner */
.brand-card-banner .text-blue-600,
.brand-card-banner .text-emerald-600,
.brand-card-banner .text-violet-600,
.brand-card-banner .text-amber-600,
.brand-card-banner .text-red-600,
.brand-card-banner .text-green-600,
.brand-card-banner .text-purple-600,
.brand-card-banner .text-indigo-600,
.brand-card-banner .text-rose-600,
.brand-card-banner .text-orange-600 {
    color: #fff !important;
}

/* Buttons inside brand banner — gray buttons to white */
.brand-card-banner .bg-gray-100 {
    background: rgba(255,255,255,0.2) !important;
}
.brand-card-banner .text-gray-700 {
    color: #fff !important;
}
.brand-card-banner .hover\:bg-gray-200:hover {
    background: rgba(255,255,255,0.3) !important;
}
.brand-card-banner .bg-emerald-500 {
    background: rgba(255,255,255,0.85) !important;
}

/* Legend dots — keep visible on brand bg */
.brand-card-banner .bg-gray-300 {
    background: rgba(255,255,255,0.35) !important;
}
.brand-card-banner .text-gray-600 {
    color: rgba(255,255,255,0.7) !important;
}

/* Brand progress bar segment */
.brand-progress-fill {
    background: var(--cc-brand-primary, #3b82f6);
}

/* Brand-colored text accent */
.brand-text-accent {
    color: var(--cc-brand-primary, #7c3aed);
}

/* ---- B) Gradient banner (hero) ---- */
/* ---- Base banner ---- */
.brand-banner,
.bg-brand-banner {
    background:
        linear-gradient(145deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.03) 50%, transparent 100%),
        linear-gradient(320deg, rgba(255,255,255,0.06) 0%, transparent 50%),
        linear-gradient(var(--cc-banner-gradient-angle, 135deg), var(--cc-banner-gradient-start, var(--cc-brand-primary, #2563eb)) 0%, var(--cc-banner-gradient-end, var(--cc-brand-primary, #2563eb)) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ---- Stats banner: wider gradient with more depth ---- */
.brand-stats-banner {
    background:
        linear-gradient(155deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 40%, transparent 70%),
        linear-gradient(320deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 70%),
        linear-gradient(
            var(--cc-banner-gradient-angle, 135deg),
            var(--cc-banner-gradient-start, var(--cc-brand-primary, #2563eb)) 0%,
            var(--cc-banner-gradient-start, var(--cc-brand-primary, #2563eb)) 30%,
            var(--cc-banner-gradient-end, var(--cc-brand-primary, #2563eb)) 70%,
            var(--cc-banner-gradient-end, var(--cc-brand-primary, #2563eb)) 100%
        );
    box-shadow:
        0 25px 50px -12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff !important;
}
.dark .brand-stats-banner {
    box-shadow:
        0 25px 50px -12px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* ---- Animated banner: motion & texture layers ---- */
.brand-banner-wave {
    position: relative;
    overflow: hidden;
}
.brand-banner-wave::before,
.brand-banner-wave::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Flowing light streaks across the gradient */
.brand-banner-wave::before {
    background:
        linear-gradient(125deg, transparent 30%, rgba(255,255,255,0.06) 45%, transparent 55%),
        linear-gradient(235deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
    animation: brandStreakFlow 15s ease-in-out infinite alternate;
}
/* Soft shimmer sweep */
.brand-banner-wave::after {
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.06) 42%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.06) 58%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: brandShimmer 10s ease-in-out infinite;
}

/* Geometric accent shapes — decorative depth */
.brand-banner-geo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.brand-banner-geo .geo {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.brand-banner-geo .geo:nth-child(1) {
    width: 300px; height: 300px; top: -120px; right: -60px;
    animation: geoFloat 20s ease-in-out infinite alternate;
}
.brand-banner-geo .geo:nth-child(2) {
    width: 200px; height: 200px; bottom: -80px; left: 15%;
    animation: geoFloat 25s ease-in-out infinite alternate-reverse;
}
.brand-banner-geo .geo:nth-child(3) {
    width: 120px; height: 120px; top: 20%; right: 25%;
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
    animation: geoFloat 18s ease-in-out infinite alternate;
    animation-delay: -5s;
}

/* Bottom wave SVG layer */
.brand-banner-wave .brand-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 200%;
    height: 50px;
    pointer-events: none;
    opacity: 0.06;
}
.brand-banner-wave .brand-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}
.brand-banner-wave .brand-wave--1 { animation: brandWaveFlow 22s linear infinite; }
.brand-banner-wave .brand-wave--2 { animation: brandWaveFlow 30s linear infinite reverse; opacity: 0.04; bottom: -6px; }

/* Dot-grid texture overlay */
.brand-banner-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
}

@keyframes brandStreakFlow {
    0%   { transform: translateX(-10%) skewX(-2deg); opacity: 0.8; }
    100% { transform: translateX(10%) skewX(2deg); opacity: 1; }
}
@keyframes brandShimmer {
    0%   { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}
@keyframes brandWaveFlow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes geoFloat {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(15px, -10px) scale(1.05); }
    100% { transform: translate(-10px, 8px) scale(0.98); }
}

/* Banner inner glass-stat cards */
.brand-banner-stat {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-banner-stat:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(0,0,0,0.15);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. TABS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Active tab state */
.brand-tab-active {
    background-color: var(--cc-brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -2px var(--cc-brand-primary-ring);
    font-weight: 600;
}
.dark .brand-tab-active {
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent);
}

/* Underline tab variant */
.brand-tab-underline {
    border-bottom: 2px solid transparent;
    color: #64748b;
    padding-bottom: 0.5rem;
    transition: all 0.2s ease;
}
.brand-tab-underline.active,
.brand-tab-underline[aria-selected="true"] {
    border-bottom-color: var(--cc-brand-primary);
    color: var(--cc-brand-primary);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Progress bar container */
.brand-progress {
    width: 100%;
    height: 0.5rem;
    background-color: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}
.dark .brand-progress {
    background-color: #334155;
}

/* Progress bar fill */
.brand-progress-bar,
.brand-progress > div {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary);
    transition: width 0.5s ease;
}

/* Thin progress variant */
.brand-progress-thin {
    height: 0.25rem;
}

/* Functional progress fills */
.brand-progress-success > div { background: var(--cc-success); }
.brand-progress-danger > div  { background: var(--cc-danger); }
.brand-progress-warning > div { background: var(--cc-warning); }

/* Circular progress ring (SVG stroke) */
.brand-progress-ring {
    stroke: var(--cc-brand-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary);
    color: #fff;
}

.brand-badge-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: transparent;
    color: var(--cc-brand-primary);
    border: 1px solid var(--cc-brand-primary);
}

.brand-badge-soft {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary-light);
    color: var(--cc-brand-primary);
}

/* Functional badges */
.brand-badge-success { background-color: var(--cc-success-light); color: #065f46; }
.brand-badge-danger  { background-color: var(--cc-danger-light);  color: #991b1b; }
.brand-badge-warning { background-color: var(--cc-warning-light); color: #92400e; }
.brand-badge-info    { background-color: var(--cc-info-light);    color: #1e40af; }


/* ═══════════════════════════════════════════════════════════════════════════════
   13. LINKS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-link {
    color: var(--cc-brand-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.brand-link:hover {
    color: var(--cc-brand-primary-hover);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   14. CARD HEADERS & SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tinted card header */
.brand-card-header {
    background-color: var(--cc-brand-primary-light);
    border-bottom: 1px solid color-mix(in srgb, var(--cc-brand-primary) 20%, transparent);
}
.dark .brand-card-header {
    background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, #0f172a);
    border-bottom-color: color-mix(in srgb, var(--cc-brand-primary) 25%, transparent);
}

/* Left-border accent card */
.brand-card-accent {
    border-left: 3px solid var(--cc-brand-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. FORM INPUTS — FOCUS STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-input:focus,
.brand-select:focus,
.brand-textarea:focus {
    border-color: var(--cc-brand-primary) !important;
    box-shadow: 0 0 0 3px var(--cc-brand-primary-ring) !important;
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   16. CHECKBOX / RADIO ACCENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.accent-brand { accent-color: var(--cc-brand-primary); }
input[type="checkbox"].brand-check:checked,
input[type="radio"].brand-check:checked { accent-color: var(--cc-brand-primary); }


/* ═══════════════════════════════════════════════════════════════════════════════
   17. STAT NUMBERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-stat {
    color: var(--cc-brand-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   18. ICON CIRCLE / AVATAR BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--cc-brand-primary);
    color: #fff;
    flex-shrink: 0;
}

.brand-icon-circle-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.brand-icon-circle-lg {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
}

.brand-icon-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--cc-brand-primary-light);
    color: var(--cc-brand-primary);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   19. DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Dark backgrounds */
.dark .dark\:bg-brand-primary      { background-color: var(--cc-brand-primary) !important; }
.dark .dark\:bg-brand-primary\/10  { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.dark .dark\:bg-brand-primary\/15  { background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.dark .dark\:bg-brand-primary\/20  { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:bg-brand-primary\/25  { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }
.dark .dark\:bg-brand-primary\/30  { background-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:bg-brand-primary\/40  { background-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }

/* Dark text */
.dark .dark\:text-brand-primary    { color: var(--cc-brand-primary) !important; }
.dark .dark\:text-brand-primary\/80 { color: color-mix(in srgb, var(--cc-brand-primary) 80%, transparent) !important; }
.dark .dark\:text-brand-secondary  { color: var(--cc-brand-secondary) !important; }

/* Dark borders */
.dark .dark\:border-brand-primary  { border-color: var(--cc-brand-primary) !important; }
.dark .dark\:border-brand-primary\/20 { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:border-brand-primary\/30 { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:border-brand-primary\/40 { border-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.dark .dark\:border-brand-primary\/50 { border-color: color-mix(in srgb, var(--cc-brand-primary) 50%, transparent) !important; }

/* Dark ring */
.dark .dark\:ring-brand-primary\/30 { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:ring-brand-primary\/40 { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.dark .dark\:focus\:ring-brand-primary:focus { --tw-ring-color: var(--cc-brand-primary) !important; }

/* Dark shadow */
.dark .dark\:shadow-brand-primary  { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:shadow-brand-primary\/20 { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:shadow-brand-primary\/30 { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }

/* Dark gradients */
.dark .dark\:from-brand-primary    { --tw-gradient-from: var(--cc-brand-primary) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:from-brand-primary\/10 { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:from-brand-secondary\/10 { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-secondary) 10%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:from-brand-secondary\/20 { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:from-brand-secondary\/40 { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-secondary) 40%, transparent) !important; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:to-brand-primary      { --tw-gradient-to: var(--cc-brand-primary) !important; }
.dark .dark\:to-brand-primary\/20  { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:to-brand-secondary\/10 { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 10%, transparent) !important; }
.dark .dark\:to-brand-secondary\/15 { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 15%, transparent) !important; }
.dark .dark\:to-brand-secondary\/20 { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 20%, transparent) !important; }
.dark .dark\:to-brand-secondary\/30 { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-secondary) 30%, transparent) !important; }

/* Dark hover */
.dark .dark\:hover\:bg-brand-primary:hover      { background-color: var(--cc-brand-primary) !important; }
.dark .dark\:hover\:bg-brand-primary\/10:hover   { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.dark .dark\:hover\:bg-brand-primary\/15:hover   { background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.dark .dark\:hover\:bg-brand-primary\/20:hover   { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:hover\:bg-brand-primary\/30:hover   { background-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:hover\:border-brand-primary:hover   { border-color: var(--cc-brand-primary) !important; }
.dark .dark\:hover\:border-brand-primary\/40:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.dark .dark\:hover\:border-brand-primary\/50:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 50%, transparent) !important; }
.dark .dark\:hover\:text-brand-primary:hover     { color: var(--cc-brand-primary) !important; }

.dark .brand-badge-soft            { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a); }
.dark .brand-badge-success         { background-color: color-mix(in srgb, var(--cc-success) 20%, #0f172a); color: #6ee7b7; }
.dark .brand-badge-danger          { background-color: color-mix(in srgb, var(--cc-danger) 20%, #0f172a);  color: #fca5a5; }
.dark .brand-badge-warning         { background-color: color-mix(in srgb, var(--cc-warning) 20%, #0f172a); color: #fcd34d; }
.dark .brand-badge-info            { background-color: color-mix(in srgb, var(--cc-info) 20%, #0f172a);    color: #93c5fd; }

.dark .brand-progress              { background-color: #334155; }
.dark .brand-card-header           { background-color: color-mix(in srgb, var(--cc-brand-primary) 12%, #0f172a); }


/* ═══════════════════════════════════════════════════════════════════════════════
   20. TOOLTIP / POPOVER BRAND ACCENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-tooltip {
    background-color: var(--cc-brand-secondary);
    color: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   21. DIVIDER / SEPARATOR
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-divider {
    border-top: 2px solid color-mix(in srgb, var(--cc-brand-primary) 20%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   22. LOADING / SPINNER
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-spinner {
    border: 3px solid #e2e8f0;
    border-top-color: var(--cc-brand-primary);
    border-radius: 50%;
    animation: brand-spin 0.6s linear infinite;
}
@keyframes brand-spin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   23. TAILWIND → BRAND VARIABLE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════
   Maps hardcoded Tailwind indigo/blue classes to brand CSS variables so ANY
   page using these classes automatically inherits org branding. This acts as
   a global safety net — pages should still migrate to brand-* classes over time.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Text colors ── */
.text-indigo-600              { color: var(--cc-brand-primary) !important; }
.text-indigo-700              { color: var(--cc-brand-primary) !important; }
.text-indigo-500              { color: var(--cc-brand-primary) !important; }
.text-indigo-400              { color: color-mix(in srgb, var(--cc-brand-primary) 60%, white) !important; }
.text-indigo-300              { color: color-mix(in srgb, var(--cc-brand-primary) 50%, white) !important; }
.text-blue-600                { color: var(--cc-brand-primary) !important; }
.text-blue-700                { color: var(--cc-brand-primary) !important; }
.text-blue-500                { color: var(--cc-brand-primary) !important; }

/* ── Dark mode text ── */
.dark .dark\:text-indigo-400  { color: color-mix(in srgb, var(--cc-brand-primary) 70%, white) !important; }
.dark .dark\:text-indigo-300  { color: color-mix(in srgb, var(--cc-brand-primary) 60%, white) !important; }
.dark .dark\:text-blue-400    { color: color-mix(in srgb, var(--cc-brand-primary) 70%, white) !important; }

/* ── Hover text ── */
.hover\:text-indigo-600:hover { color: var(--cc-brand-primary) !important; }
.hover\:text-blue-600:hover   { color: var(--cc-brand-primary) !important; }
.group:hover .group-hover\:text-indigo-600 { color: var(--cc-brand-primary) !important; }
.group:hover .group-hover\:text-indigo-400 { color: color-mix(in srgb, var(--cc-brand-primary) 60%, white) !important; }
.dark .group:hover .dark\:group-hover\:text-indigo-400 { color: color-mix(in srgb, var(--cc-brand-primary) 70%, white) !important; }
.group:hover .group-hover\:text-indigo-700 { color: var(--cc-brand-primary) !important; }
.dark .group:hover .dark\:group-hover\:text-indigo-300 { color: color-mix(in srgb, var(--cc-brand-primary) 60%, white) !important; }

/* ── Solid backgrounds ── */
.bg-indigo-600                { background-color: var(--cc-brand-primary) !important; }
.bg-indigo-700                { background-color: color-mix(in srgb, var(--cc-brand-primary) 85%, black) !important; }
.bg-indigo-500                { background-color: var(--cc-brand-primary) !important; }
.bg-blue-500                  { background-color: var(--cc-brand-primary) !important; }
.bg-blue-600                  { background-color: var(--cc-brand-primary) !important; }

/* ── Tinted backgrounds ── */
.bg-indigo-50                 { background-color: color-mix(in srgb, var(--cc-brand-primary) 8%, transparent) !important; }
.bg-indigo-100                { background-color: color-mix(in srgb, var(--cc-brand-primary) 12%, transparent) !important; }
.bg-blue-50                   { background-color: color-mix(in srgb, var(--cc-brand-primary) 8%, transparent) !important; }
.bg-blue-100                  { background-color: color-mix(in srgb, var(--cc-brand-primary) 12%, transparent) !important; }
.bg-indigo-500\/10            { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.bg-indigo-500\/20            { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }

/* ── Dark mode backgrounds ── */
.dark .dark\:bg-indigo-900\/20  { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a) !important; }
.dark .dark\:bg-indigo-900\/30  { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, #0f172a) !important; }
.dark .dark\:bg-indigo-900\/50  { background-color: color-mix(in srgb, var(--cc-brand-primary) 30%, #0f172a) !important; }
.dark .dark\:bg-blue-900\/20    { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a) !important; }
.dark .dark\:bg-blue-900\/30    { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, #0f172a) !important; }

/* ── Hover backgrounds ── */
.hover\:bg-indigo-50:hover    { background-color: color-mix(in srgb, var(--cc-brand-primary) 8%, transparent) !important; }
.hover\:bg-indigo-700:hover   { background-color: color-mix(in srgb, var(--cc-brand-primary) 85%, black) !important; }
.hover\:bg-indigo-600:hover   { background-color: var(--cc-brand-primary) !important; }
.dark .dark\:hover\:bg-indigo-900\/30:hover { background-color: color-mix(in srgb, var(--cc-brand-primary) 25%, #0f172a) !important; }

/* ── Border colors ── */
.border-indigo-200            { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.border-indigo-300            { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.border-indigo-100            { border-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.border-indigo-500            { border-color: var(--cc-brand-primary) !important; }
.border-blue-200              { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }

/* ── Dark mode borders ── */
.dark .dark\:border-indigo-800  { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, #0f172a) !important; }
.dark .dark\:border-indigo-700  { border-color: color-mix(in srgb, var(--cc-brand-primary) 35%, #0f172a) !important; }
.dark .dark\:border-indigo-900  { border-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a) !important; }
.dark .dark\:border-blue-800    { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, #0f172a) !important; }

/* ── Hover borders ── */
.hover\:border-indigo-300:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.dark .dark\:hover\:border-indigo-700:hover { border-color: color-mix(in srgb, var(--cc-brand-primary) 35%, #0f172a) !important; }

/* ── Focus rings ── */
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--cc-brand-primary) !important; }
.focus\:border-indigo-500:focus { border-color: var(--cc-brand-primary) !important; }
.ring-indigo-200              { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.ring-indigo-100              { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.dark .dark\:ring-indigo-800  { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 30%, #0f172a) !important; }
.dark .dark\:ring-blue-900    { --tw-ring-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a) !important; }

/* ── Box shadows ── */
.shadow-indigo-500\/20        { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.shadow-indigo-500\/25        { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }
.shadow-violet-500\/20        { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.shadow-violet-500\/30        { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }
.hover\:shadow-indigo-500\/20:hover { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.hover\:shadow-violet-500\/10:hover { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.hover\:shadow-violet-500\/40:hover { box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.dark .dark\:hover\:shadow-violet-500\/5:hover { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 5%, transparent) !important; }