/**
 * Bloomclicks 2.0 Brand System — CSS Design Tokens
 * Version: 3.0 (UNIFIED — Replaces design-system/tokens.css)
 * Last Updated: 2026-05-18
 *
 * SINGLE SOURCE OF TRUTH for all design values across every portal.
 * Use --bc-* namespace exclusively. Never use --bloom-* (deprecated).
 *
 * USAGE RULE (STR-003):
 *   ✅ Correct  → color: var(--bc-primary, #0931A0);
 *   ❌ Wrong    → color: #0931A0;
 *   ✅ In this file → --bc-primary: #0931A0;  (token definitions may contain hex)
 */

:root {
    /* ========================================
       CORE BRAND COLORS
       ======================================== */
    --bc-primary:       #0931A0;
    --bc-secondary:     #006AFF;
    --bc-alert:         #EC2F37;
    --bc-metallic-dark: #020024;

    /* ========================================
       SEMANTIC TEXT & SURFACE TOKENS
       ======================================== */
    --bc-text:           #1A2236;   /* Primary body text */
    --bc-text-muted:     #6B7280;   /* Secondary / placeholder text */
    --bc-text-inverse:   #FFFFFF;   /* Text on dark backgrounds */
    --bc-surface:        #f4f5f7;   /* Page / app background */
    --bc-surface-raised: #FFFFFF;   /* Card, panel, modal background */
    --bc-border-subtle:  #E5E7EB;   /* Default dividers & borders */

    /* ========================================
       TYPOGRAPHY TOKENS
       ======================================== */
    --bc-font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bc-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bc-font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    /* Font scale (1.25 type scale) */
    --bc-text-xs:   0.75rem;    /* 12px */
    --bc-text-sm:   0.875rem;   /* 14px */
    --bc-text-base: 1rem;       /* 16px */
    --bc-text-lg:   1.125rem;   /* 18px */
    --bc-text-xl:   1.25rem;    /* 20px */
    --bc-text-2xl:  1.5rem;     /* 24px */
    --bc-text-3xl:  1.875rem;   /* 30px */
    --bc-text-4xl:  2.25rem;    /* 36px */

    /* Font weights */
    --bc-weight-normal:    400;
    --bc-weight-medium:    500;
    --bc-weight-semibold:  600;
    --bc-weight-bold:      700;
    --bc-weight-extrabold: 800;

    /* Line heights */
    --bc-leading-tight:   1.25;
    --bc-leading-snug:    1.375;
    --bc-leading-normal:  1.5;
    --bc-leading-relaxed: 1.625;

    /* ========================================
       BRAND GRADIENTS (Unified)
       ======================================== */
    /* Primary gradient (horizontal) */
    --bc-gradient-primary:          linear-gradient(90deg, #020024 0%, #0931A0 38%, #006AFF 100%);
    --bc-gradient-primary-hover:    linear-gradient(90deg, #020024 0%, #0931A0 30%, #006AFF 90%);
    --bc-gradient-primary-vertical: linear-gradient(180deg, #020024 0%, #0931A0 38%, #006AFF 100%);
    --bc-gradient-primary-diagonal: linear-gradient(135deg, #020024 0%, #0931A0 38%, #006AFF 100%);
    --bc-gradient-primary-radial:   radial-gradient(circle, #006AFF 0%, #0931A0 50%, #020024 100%);

    /* Opacity variants */
    --bc-gradient-primary-10: linear-gradient(90deg, rgba(2,0,36,.1) 0%, rgba(9,49,160,.1) 38%, rgba(0,106,255,.1) 100%);
    --bc-gradient-primary-20: linear-gradient(90deg, rgba(2,0,36,.2) 0%, rgba(9,49,160,.2) 38%, rgba(0,106,255,.2) 100%);
    --bc-gradient-primary-30: linear-gradient(90deg, rgba(2,0,36,.3) 0%, rgba(9,49,160,.3) 38%, rgba(0,106,255,.3) 100%);
    --bc-gradient-primary-50: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(9,49,160,.5) 38%, rgba(0,106,255,.5) 100%);

    /* Metallic gradients */
    --bc-gradient-silver:   linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 50%, #A8A8A8 100%);
    --bc-gradient-gold:     linear-gradient(135deg, #D4AF37 0%, #F4E4C1 50%, #B8941E 100%);
    --bc-gradient-platinum: linear-gradient(135deg, #E5E4E2 0%, #FFFFFF 50%, #C9C9C9 100%);

    /* ========================================
       PORTAL GRADIENTS (Main Aesthetics)
       ======================================== */
    --gradient-admin-partners: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 106, 255, 1) 100%);
    --gradient-merchant: linear-gradient(90deg, rgba(9, 9, 121, 1) 0%, rgba(0, 106, 255, 1) 40%, rgba(2, 0, 36, 1) 100%);
    --gradient-employee: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 39%, rgba(0, 212, 255, 1) 100%);
    --gradient-partner: linear-gradient(90deg, rgba(9, 49, 160, 1) 0%, rgba(2, 0, 36, 1) 35%, rgba(0, 106, 255, 1) 100%);
    --gradient-agency: linear-gradient(90deg, rgba(9, 49, 160, 1) 0%, rgba(7, 63, 140, 1) 100%);

    /* ========================================
       SIDEBAR GRADIENTS
       ======================================== */
    --sidebar-employee: #020024;
    --sidebar-admin: linear-gradient(33deg, rgba(0, 106, 255, 1) 0%, rgba(9, 9, 121, 1) 42%);
    --sidebar-merchant: linear-gradient(41deg, rgba(9, 9, 121, 1) 61%, rgba(0, 106, 255, 1) 100%);
    --sidebar-partner: linear-gradient(38deg, rgba(9, 9, 121, 1) 68%, rgba(0, 212, 255, 1) 100%);

    /* Sidebar Text & States */
    --sidebar-text: #FFFFFF;
    --sidebar-text-muted: rgba(255, 255, 255, 0.8);
    --sidebar-hover: rgba(255, 255, 255, 0.15);
    --sidebar-active: rgba(255, 255, 255, 0.25);
    --sidebar-border: rgba(255, 255, 255, 0.1);

    /* ========================================
       BUTTONS
       ======================================== */
    /* Primary Buttons */
    --btn-primary-bg: #0931A0;
    --btn-primary-hover: #072580;
    --btn-primary-active: #051D66;
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 2px 8px rgba(9, 49, 160, 0.3);
    --btn-primary-shadow-hover: 0 4px 12px rgba(9, 49, 160, 0.4);

    /* Primary Gradient Buttons */
    --btn-primary-gradient: linear-gradient(90deg, #0931A0 0%, #006AFF 100%);
    --btn-primary-gradient-hover: linear-gradient(90deg, #072580 0%, #0052CC 100%);

    /* Secondary Buttons */
    --btn-secondary-bg: #006AFF;
    --btn-secondary-hover: #0052CC;
    --btn-secondary-active: #0043A8;
    --btn-secondary-text: #FFFFFF;
    --btn-secondary-shadow: 0 2px 8px rgba(0, 106, 255, 0.3);

    /* Alert/Danger Buttons */
    --btn-alert-bg: #EC2F37;
    --btn-alert-hover: #D12730;
    --btn-alert-active: #B91C1C;
    --btn-alert-text: #FFFFFF;
    --btn-alert-shadow: 0 2px 8px rgba(236, 47, 55, 0.3);

    /* Success Buttons (FIXED - DO NOT CHANGE) */
    --btn-success-bg: #10B981;
    --btn-success-hover: #059669;
    --btn-success-active: #047857;
    --btn-success-text: #FFFFFF;
    --btn-success-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);

    /* ========================================
       HOVER & ACTIVE STATES
       ======================================== */
    --hover-bg-light: rgba(9, 49, 160, 0.05);
    --hover-bg-medium: rgba(9, 49, 160, 0.1);
    --hover-bg-dark: rgba(9, 49, 160, 0.15);
    --hover-border: #0931A0;
    --hover-text: #072580;
    --hover-shadow: 0 2px 8px rgba(9, 49, 160, 0.15);

    --active-bg-light: rgba(9, 49, 160, 0.1);
    --active-bg-medium: rgba(9, 49, 160, 0.15);
    --active-bg-dark: rgba(9, 49, 160, 0.2);
    --active-border: #072580;
    --active-text: #051D66;

    --focus-ring: 0 0 0 3px rgba(9, 49, 160, 0.2);
    --focus-border: #0931A0;

    /* ========================================
       MOTION SYSTEM (Bloomclicks 2.0)
       Single source of truth for duration, easing,
       and transition shorthands. Consumed by all
       component CSS and Alpine x-transition values.
       Per motion-system.md v4.0.
       ======================================== */

    /* Duration scale — operational pace */
    --duration-instant:    75ms;   /* state echo, no perceived motion */
    --duration-fast:      120ms;   /* hover color/opacity */
    --duration-base:      150ms;   /* default UI state changes */
    --duration-medium:    180ms;   /* card hover, modal entrance */
    --duration-enter:     200ms;   /* dropdown/popover entrance */
    --duration-slow:      300ms;   /* panel expand/collapse */
    --duration-deliberate: 400ms;  /* progress bars, chart redraw */
    --duration-load:      600ms;   /* chart entrance animation */
    --duration-shimmer:  1400ms;   /* skeleton shimmer loop */

    /* Easing curves — premium deceleration bias */
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);   /* entering elements */
    --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);     /* exiting elements */
    --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);   /* bidirectional */
    --ease-sharp:  cubic-bezier(0.4, 0.0, 0.6, 1);   /* short, decisive */

    /* Transition shorthands — composed property lists */
    --transition-button: background-color var(--duration-base) var(--ease-out),
                         border-color     var(--duration-base) var(--ease-out),
                         box-shadow       var(--duration-base) var(--ease-out),
                         transform        var(--duration-base) var(--ease-out),
                         color            var(--duration-base) var(--ease-out);

    --transition-card:   box-shadow var(--duration-medium) var(--ease-out),
                         transform  var(--duration-medium) var(--ease-out);

    --transition-input:  border-color var(--duration-base) var(--ease-inout),
                         box-shadow   var(--duration-base) var(--ease-inout);

    --transition-nav:    color            var(--duration-fast) var(--ease-inout),
                         background-color var(--duration-fast) var(--ease-inout);

    --transition-fade:   opacity var(--duration-base) var(--ease-out);

    --transition-sidebar: width var(--duration-enter) var(--ease-inout);

    --transition-progress: width var(--duration-deliberate) var(--ease-inout);

    /* ========================================
       CTAs (Call-to-Action)
       ======================================== */
    --cta-primary-bg: linear-gradient(90deg, #0931A0 0%, #006AFF 100%);
    --cta-primary-hover: linear-gradient(90deg, #072580 0%, #0052CC 100%);
    --cta-primary-text: #FFFFFF;
    --cta-primary-shadow: 0 4px 16px rgba(9, 49, 160, 0.35);
    --cta-primary-shadow-hover: 0 6px 20px rgba(9, 49, 160, 0.45);

    --cta-secondary-bg: #006AFF;
    --cta-secondary-hover: #0052CC;
    --cta-secondary-text: #FFFFFF;
    --cta-secondary-shadow: 0 4px 12px rgba(0, 106, 255, 0.3);

    --cta-urgent-bg: linear-gradient(90deg, #EC2F37 0%, #FF6A5E 100%);
    --cta-urgent-hover: linear-gradient(90deg, #D12730 0%, #E55548 100%);
    --cta-urgent-text: #FFFFFF;
    --cta-urgent-shadow: 0 4px 16px rgba(236, 47, 55, 0.35);

    /* ========================================
       LINKS
       ======================================== */
    --link-default: #006AFF;
    --link-hover: #0052CC;
    --link-active: #0043A8;
    --link-visited: #0931A0;

    --link-sidebar-default: rgba(255, 255, 255, 0.8);
    --link-sidebar-hover: rgba(255, 255, 255, 1);
    --link-sidebar-active: #FFFFFF;

    --link-nav-default: #333333;
    --link-nav-hover: #0931A0;
    --link-nav-active: #006AFF;

    /* ========================================
       CHARTS & DASHBOARDS
       ======================================== */
    --chart-primary: #0931A0;
    --chart-secondary: #006AFF;
    --chart-tertiary: #00D4FF;
    --chart-accent-1: #090979;
    --chart-accent-2: #073F8C;

    --chart-success: #10B981;
    --chart-warning: #F59E0B;
    --chart-danger: #EC2F37;
    --chart-info: #006AFF;
    --chart-neutral: #6B7280;

    --chart-grid: rgba(9, 49, 160, 0.1);
    --chart-axis: #6B7280;
    --chart-label: #333333;
    --chart-tooltip-bg: rgba(2, 0, 36, 0.95);
    --chart-tooltip-text: #FFFFFF;
    --chart-tooltip-border: rgba(0, 106, 255, 0.3);

    --chart-gradient-primary: linear-gradient(180deg, rgba(9, 49, 160, 0.3) 0%, rgba(9, 49, 160, 0.05) 100%);
    --chart-gradient-secondary: linear-gradient(180deg, rgba(0, 106, 255, 0.3) 0%, rgba(0, 106, 255, 0.05) 100%);
    --chart-gradient-success: linear-gradient(180deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.05) 100%);

    /* ========================================
       CARDS & PANELS
       ======================================== */
    --card-bg: #FFFFFF;
    --card-border: #E5E7EB;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 4px 12px rgba(9, 49, 160, 0.12);
    --card-radius: 12px;

    --card-elevated-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --card-elevated-shadow-hover: 0 8px 24px rgba(9, 49, 160, 0.15);

    --panel-bg: #F9FAFB;
    --panel-border: #E5E7EB;
    --panel-header-bg: #FFFFFF;
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    /* ========================================
       PREMIUM CARDS & OVERLAYS
       ======================================== */
    --premium-card-bg: linear-gradient(135deg, #020024 0%, #0931A0 100%);
    --premium-card-border: linear-gradient(90deg, #0931A0 0%, #006AFF 100%);
    --premium-card-text: #FFFFFF;
    --premium-card-accent: #FFD700;
    --premium-card-shadow: 0 8px 32px rgba(9, 49, 160, 0.3);

    --featured-card-bg: linear-gradient(135deg, rgba(9, 49, 160, 0.05) 0%, rgba(0, 106, 255, 0.05) 100%);
    --featured-card-border: #006AFF;
    --featured-card-shadow: 0 4px 16px rgba(0, 106, 255, 0.15);

    /* ========================================
       KPI CARDS & STATS
       ======================================== */
    --kpi-border-primary: #0931A0;
    --kpi-border-secondary: #006AFF;
    --kpi-border-success: #10B981;
    --kpi-border-warning: #F59E0B;
    --kpi-border-danger: #EC2F37;
    --kpi-border-info: #00D4FF;

    --kpi-value-primary: #0931A0;
    --kpi-value-secondary: #006AFF;
    --kpi-value-success: #10B981;
    --kpi-value-warning: #F59E0B;
    --kpi-value-danger: #EC2F37;

    --kpi-trend-positive: #10B981;
    --kpi-trend-negative: #EC2F37;
    --kpi-trend-neutral: #6B7280;

    --kpi-label-text: #6B7280;

    /* ========================================
       HERO SECTIONS
       ======================================== */
    --hero-bg: linear-gradient(135deg, #020024 0%, #0931A0 35%, #006AFF 100%);
    --hero-overlay: rgba(2, 0, 36, 0.7);
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: rgba(255, 255, 255, 0.9);
    --hero-accent: #00D4FF;

    --page-header-bg: linear-gradient(90deg, rgba(9, 49, 160, 0.03) 0%, rgba(0, 106, 255, 0.03) 100%);
    --page-header-border: rgba(9, 49, 160, 0.1);

    /* ========================================
       FORM INPUTS & INTERACTIVE ELEMENTS
       ======================================== */
    --input-bg: #FFFFFF;
    --input-border: #D1D5DB;
    --input-border-focus: #0931A0;
    --input-text: #333333;
    --input-placeholder: #9CA3AF;
    --input-shadow-focus: 0 0 0 3px rgba(9, 49, 160, 0.1);
    --input-disabled-bg: #F3F4F6;
    --input-disabled-text: #9CA3AF;

    --checkbox-border: #D1D5DB;
    --checkbox-checked-bg: #0931A0;
    --checkbox-checked-border: #0931A0;
    --checkbox-hover-border: #006AFF;

    --toggle-bg-off: #D1D5DB;
    --toggle-bg-on: #0931A0;
    --toggle-handle: #FFFFFF;

    --dropdown-bg: #FFFFFF;
    --dropdown-border: #D1D5DB;
    --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --dropdown-item-hover: rgba(9, 49, 160, 0.05);
    --dropdown-item-selected: #0931A0;
    --dropdown-item-selected-text: #FFFFFF;

    /* ========================================
       TABS
       ======================================== */
    --tab-text: #6B7280;
    --tab-hover-text: #333333;
    --tab-active-text: #0931A0;
    --tab-active-border: #0931A0;
    --tab-active-bg: rgba(9, 49, 160, 0.05);
    --tab-border-bottom: #E5E7EB;

    /* ========================================
       BADGES & TAGS
       ======================================== */
    --badge-primary-bg: #0931A0;
    --badge-primary-text: #FFFFFF;
    --badge-secondary-bg: #006AFF;
    --badge-secondary-text: #FFFFFF;
    --badge-success-bg: #10B981;
    --badge-success-text: #FFFFFF;
    --badge-warning-bg: #F59E0B;
    --badge-warning-text: #FFFFFF;
    --badge-danger-bg: #EC2F37;
    --badge-danger-text: #FFFFFF;
    --badge-neutral-bg: #6B7280;
    --badge-neutral-text: #FFFFFF;
    --badge-light-bg: #F3F4F6;
    --badge-light-text: #333333;

    /* ========================================
       PROGRESS BARS
       ======================================== */
    --progress-bg: #E5E7EB;
    --progress-fill: linear-gradient(90deg, #0931A0 0%, #006AFF 100%);
    --progress-text: #333333;

    /* ========================================
       TOOLTIPS & MODALS
       ======================================== */
    --tooltip-bg: rgba(2, 0, 36, 0.95);
    --tooltip-text: #FFFFFF;
    --tooltip-border: rgba(0, 106, 255, 0.3);
    --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    --modal-bg: #FFFFFF;
    --modal-overlay: rgba(2, 0, 36, 0.7);
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    --modal-header-bg: linear-gradient(90deg, rgba(9, 49, 160, 0.05) 0%, rgba(0, 106, 255, 0.05) 100%);
    --modal-header-border: rgba(9, 49, 160, 0.1);
    --modal-footer-bg: #F9FAFB;
    --modal-footer-border: #E5E7EB;

    /* ========================================
       ALERTS & NOTIFICATIONS
       ======================================== */
    --alert-info-bg: rgba(0, 106, 255, 0.1);
    --alert-info-border: #006AFF;
    --alert-info-text: #0052CC;

    --alert-success-bg: rgba(16, 185, 129, 0.1);
    --alert-success-border: #10B981;
    --alert-success-text: #059669;

    --alert-warning-bg: rgba(245, 158, 11, 0.1);
    --alert-warning-border: #F59E0B;
    --alert-warning-text: #D97706;

    --alert-error-bg: rgba(236, 47, 55, 0.1);
    --alert-error-border: #EC2F37;
    --alert-error-text: #D12730;

    /* ========================================
       NEUTRAL & SUPPORT COLORS
       ======================================== */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F4F5F7;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #A3A3A3;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #333333;
    --gray-900: #1F2937;
    --black: #000000;

    /* ========================================
       STATUS COLORS (Extended)
       ======================================== */
    /* Success Colors */
    --success-light: rgba(16, 185, 129, 0.1);
    --success: #10B981;
    --success-dark: #047857;

    /* Warning Colors */
    --warning-light: rgba(245, 158, 11, 0.1);
    --warning: #F59E0B;
    --warning-dark: #B45309;

    /* Danger Colors */
    --danger-light: rgba(239, 68, 68, 0.1);
    --danger: #EF4444;
    --danger-dark: #B91C1C;

    /* Info Colors */
    --info-light: rgba(0, 106, 255, 0.1);
    --info: #006AFF;
    --info-dark: #0052CC;

    /* ========================================
       OVERLAY & SHADOW SYSTEM
       ======================================== */
    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-brand: rgba(9, 49, 160, 0.5);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Brand Shadows */
    --shadow-brand-sm: 0 2px 8px rgba(9, 49, 160, 0.15);
    --shadow-brand-md: 0 4px 12px rgba(9, 49, 160, 0.2);
    --shadow-brand-lg: 0 8px 24px rgba(9, 49, 160, 0.25);

    /* ========================================
       DIVIDERS
       ======================================== */
    --divider-default: #E5E7EB;
    --divider-accent: linear-gradient(90deg, transparent 0%, #0931A0 50%, transparent 100%);
    --divider-gradient: linear-gradient(90deg, rgba(9, 49, 160, 0.1) 0%, rgba(0, 106, 255, 0.1) 100%);

    /* ========================================
       SLIDER / BANNER CAROUSEL
       ======================================== */
    /* Carousel Container */
    --carousel-bg: linear-gradient(135deg, rgba(2, 0, 36, 0.95) 0%, rgba(9, 49, 160, 0.95) 100%);
    --carousel-border: rgba(0, 106, 255, 0.2);
    --carousel-shadow: 0 8px 32px rgba(9, 49, 160, 0.25);
    --carousel-radius: 16px;

    /* Carousel Slides */
    --carousel-slide-bg: linear-gradient(135deg, #020024 0%, #0931A0 50%, #006AFF 100%);
    --carousel-slide-overlay: linear-gradient(90deg, rgba(2, 0, 36, 0.8) 0%, rgba(9, 49, 160, 0.4) 50%, transparent 100%);
    --carousel-slide-text: #FFFFFF;
    --carousel-slide-text-secondary: rgba(255, 255, 255, 0.85);

    /* Carousel Navigation Dots */
    --carousel-dot-inactive: rgba(255, 255, 255, 0.4);
    --carousel-dot-active: #FFFFFF;
    --carousel-dot-hover: rgba(255, 255, 255, 0.7);
    --carousel-dot-size: 10px;
    --carousel-dot-size-active: 12px;
    --carousel-dot-gap: 8px;

    /* Carousel Navigation Arrows */
    --carousel-arrow-bg: rgba(255, 255, 255, 0.15);
    --carousel-arrow-bg-hover: rgba(255, 255, 255, 0.25);
    --carousel-arrow-color: #FFFFFF;
    --carousel-arrow-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --carousel-arrow-size: 44px;
    --carousel-arrow-icon-size: 20px;

    /* Carousel Progress Bar */
    --carousel-progress-bg: rgba(255, 255, 255, 0.2);
    --carousel-progress-fill: linear-gradient(90deg, #006AFF 0%, #00D4FF 100%);
    --carousel-progress-height: 3px;

    /* Carousel CTA Buttons */
    --carousel-cta-primary-bg: #FFFFFF;
    --carousel-cta-primary-text: #0931A0;
    --carousel-cta-primary-hover: rgba(255, 255, 255, 0.9);
    --carousel-cta-primary-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
    --carousel-cta-secondary-bg: transparent;
    --carousel-cta-secondary-border: rgba(255, 255, 255, 0.5);
    --carousel-cta-secondary-text: #FFFFFF;
    --carousel-cta-secondary-hover-bg: rgba(255, 255, 255, 0.1);

    /* Carousel Badge/Tag */
    --carousel-badge-bg: rgba(0, 106, 255, 0.8);
    --carousel-badge-text: #FFFFFF;
    --carousel-badge-featured-bg: #FFD700;
    --carousel-badge-featured-text: #020024;

    /* Carousel Thumbnail Strip */
    --carousel-thumb-bg: rgba(255, 255, 255, 0.1);
    --carousel-thumb-active-border: #006AFF;
    --carousel-thumb-hover-border: rgba(0, 106, 255, 0.5);
    --carousel-thumb-overlay: rgba(2, 0, 36, 0.4);

    /* ========================================
       Z-INDEX SYSTEM (Bootstrap 5-Inspired)
       Version: 1.0.0
       Date: February 1, 2026
       
       PHILOSOPHY:
       - Bootstrap 5 compatible
       - Clear layer separation
       - Room for future features
       - Consistent across all portals
       
       HIERARCHY:
       Base (0-100) → Sticky/Fixed (1000-1030) → 
       Interactive (1040-1070) → Notifications (1070-1090) → 
       Critical (9000+)
       ======================================== */
    
    /* Base Layers (0-100) */
    --z-base: 0;                    /* Default content, background elements */
    --z-behind: -1;                 /* Hidden elements, decorative backgrounds */
    
    /* Sticky & Fixed Elements (1000-1030) */
    --z-sticky: 1010;               /* Sticky headers, sections within content */
    --z-navbar: 1020;               /* Top navigation bar (fixed) */
    --z-sidebar: 1030;              /* Side navigation panel (fixed) */
    
    /* Interactive Overlays (1040-1070) */
    --z-dropdown: 1040;             /* Dropdown menus, select options */
    --z-popover: 1050;              /* Popovers, small tooltips */
    --z-modal-backdrop: 1055;       /* Modal background overlay */
    --z-modal: 1060;                /* Modal dialogs, lightboxes */
    --z-offcanvas: 1065;            /* Off-canvas panels, slide-outs */
    
    /* Notifications & Feedback (1070-1090) */
    --z-tooltip: 1070;              /* Tooltips (always visible, even over modals) */
    --z-toast: 1080;                /* Toast notifications */
    --z-alert: 1085;                /* Alert banners, system messages */
    
    /* Critical Overlays (9000+) */
    --z-loading: 9000;              /* Full-page loading overlays */
    --z-critical: 9999;             /* Critical system messages (highest priority) */
    
    /* Legacy Compatibility (DEPRECATED - Use new values above) */
    --z-header: var(--z-navbar);    /* Alias for navbar (deprecated) */
    --z-fixed: var(--z-sidebar);    /* Alias for sidebar (deprecated) */
}

/* ========================================================================
   DEPRECATED ALIASES (--bloom-* namespace — remove after full migration)
   ======================================================================== */
:root {
    --bloom-brand-gradient-primary:          var(--bc-gradient-primary);
    --bloom-brand-gradient-primary-hover:    var(--bc-gradient-primary-hover);
    --bloom-brand-gradient-primary-vertical: var(--bc-gradient-primary-vertical);
    --bloom-brand-gradient-primary-diagonal: var(--bc-gradient-primary-diagonal);
    --bloom-brand-gradient-primary-radial:   var(--bc-gradient-primary-radial);
    --bloom-brand-gradient-primary-10:       var(--bc-gradient-primary-10);
    --bloom-brand-gradient-primary-20:       var(--bc-gradient-primary-20);
    --bloom-brand-gradient-primary-30:       var(--bc-gradient-primary-30);
    --bloom-brand-gradient-primary-50:       var(--bc-gradient-primary-50);
    --bloom-navy-deep:          #020024;
    --bloom-blue-royal:         #0931A0;
    --bloom-blue-bright:        #006AFF;
    --bloom-metallic-silver:    var(--bc-gradient-silver);
    --bloom-metallic-gold:      var(--bc-gradient-gold);
    --bloom-metallic-platinum:  var(--bc-gradient-platinum);
}

/* ========================================================================
   DARK MODE TOKEN OVERRIDES
   Activated via prefers-color-scheme or .dark-mode class on <html>
   ======================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bc-text:           #E2E8F0;
        --bc-text-muted:     #94A3B8;
        --bc-text-inverse:   #1A2236;
        --bc-surface:        #0F172A;
        --bc-surface-raised: #1E293B;
        --bc-border-subtle:  #2D3748;

        --card-bg:           #1E293B;
        --card-border:       #2D3748;
        --panel-bg:          #0F172A;
        --panel-border:      #2D3748;
        --panel-header-bg:   #1E293B;

        --input-bg:          #1E293B;
        --input-border:      #2D3748;
        --input-text:        #E2E8F0;
        --input-placeholder: #64748B;
        --input-disabled-bg: #0F172A;

        --tab-border-bottom: #2D3748;
        --tab-text:          #94A3B8;
        --tab-hover-text:    #E2E8F0;

        --modal-bg:          #1E293B;
        --modal-footer-bg:   #0F172A;
        --modal-footer-border: #2D3748;

        --dropdown-bg:       #1E293B;
        --dropdown-border:   #2D3748;
        --dropdown-item-hover: rgba(9,49,160,.15);

        --chart-label:       #94A3B8;
        --chart-axis:        #475569;
        --chart-grid:        rgba(148,163,184,.15);
    }
}

/* Manual dark mode class (for JS toggle) — comprehensive token override */
html.dark-mode {
    /* ── Text ──────────────────────────────────────────────────── */
    --bc-text:           #E2E8F0;
    --bc-text-muted:     #94A3B8;
    --bc-text-inverse:   #1A2236;

    /* ── Surfaces ──────────────────────────────────────────────── */
    --bc-surface:        #0F172A;
    --bc-surface-raised: #1E293B;
    --bc-border-subtle:  #2D3748;

    /* ── Cards & Panels ────────────────────────────────────────── */
    --card-bg:              #1E293B;
    --card-border:          #2D3748;
    --card-shadow:          0 1px 3px rgba(0,0,0,.4);
    --card-shadow-hover:    0 4px 12px rgba(0,0,0,.3);
    --card-elevated-shadow: 0 4px 12px rgba(0,0,0,.35);
    --panel-bg:             #0F172A;
    --panel-border:         #2D3748;
    --panel-header-bg:      #1E293B;
    --panel-shadow:         0 2px 8px rgba(0,0,0,.25);

    /* ── Inputs & Forms ────────────────────────────────────────── */
    --input-bg:           #1E293B;
    --input-border:       #334155;
    --input-text:         #E2E8F0;
    --input-placeholder:  #64748B;
    --input-disabled-bg:  #0F172A;
    --input-focus-border: #3B82F6;
    --input-focus-ring:   rgba(59,130,246,.25);

    /* ── Modals ────────────────────────────────────────────────── */
    --modal-bg:           #1E293B;
    --modal-footer-bg:    #0F172A;
    --modal-footer-border: #2D3748;

    /* ── Dropdowns ─────────────────────────────────────────────── */
    --dropdown-bg:           #1E293B;
    --dropdown-border:       #2D3748;
    --dropdown-item-hover:   rgba(59,130,246,.15);
    --dropdown-item-active:  rgba(59,130,246,.2);

    /* ── Tabs ──────────────────────────────────────────────────── */
    --tab-border-bottom: #2D3748;
    --tab-text:          #94A3B8;
    --tab-hover-text:    #E2E8F0;
    --tab-active-text:   #60A5FA;
    --tab-active-border: #60A5FA;

    /* ── Tables ────────────────────────────────────────────────── */
    --table-bg:          #1E293B;
    --table-border:      #2D3748;
    --table-header-bg:   #0F172A;
    --table-row-hover:   rgba(59,130,246,.08);
    --table-stripe:      rgba(0,0,0,.15);

    /* ── Alerts ────────────────────────────────────────────────── */
    --alert-info-bg:     rgba(59,130,246,.15);
    --alert-info-border: rgba(59,130,246,.3);
    --alert-info-text:   #93C5FD;
    --alert-success-bg:  rgba(16,185,129,.15);
    --alert-success-border: rgba(16,185,129,.3);
    --alert-success-text: #6EE7B7;
    --alert-warning-bg:  rgba(245,158,11,.15);
    --alert-warning-border: rgba(245,158,11,.3);
    --alert-warning-text: #FCD34D;
    --alert-error-bg:    rgba(239,68,68,.15);
    --alert-error-border: rgba(239,68,68,.3);
    --alert-error-text:  #FCA5A5;

    /* ── Tooltips ──────────────────────────────────────────────── */
    --tooltip-bg:        #334155;
    --tooltip-text:      #E2E8F0;

    /* ── Hover states ──────────────────────────────────────────── */
    --hover-bg-light:  rgba(59,130,246,.08);
    --hover-bg-medium: rgba(59,130,246,.12);
    --hover-bg-dark:   rgba(59,130,246,.18);

    /* ── Charts ────────────────────────────────────────────────── */
    --chart-label:  #94A3B8;
    --chart-axis:   #475569;
    --chart-grid:   rgba(148,163,184,.15);

    /* ── Navbar (Staradmin Pro) ─────────────────────────────────── */
    --navbar-bg:          #1E293B;
    --navbar-border:      #2D3748;
    --navbar-text:        #E2E8F0;
    --navbar-icon-color:  #94A3B8;
    --navbar-search-bg:   #0F172A;

    /* ── Sidebar text states ────────────────────────────────────── */
    --sidebar-text:        #E2E8F0;
    --sidebar-text-muted:  rgba(226,232,240,.7);
    --sidebar-hover:       rgba(226,232,240,.12);
    --sidebar-active:      rgba(226,232,240,.2);
}

/* ========================================================================
   DARK MODE — STRUCTURAL OVERRIDES
   Targets Staradmin Pro / Bootstrap selectors that use hard-coded values
   and don't respond to CSS custom properties alone.
   ======================================================================== */

/* ── Page background & text ─────────────────────────────────────────── */
html.dark-mode body,
html.dark-mode .content-wrapper,
html.dark-mode .page-body-wrapper {
    background-color: var(--bc-surface, #0F172A) !important;
    color: var(--bc-text, #E2E8F0) !important;
}

/* ── Topbar / Navbar ─────────────────────────────────────────────────── */
html.dark-mode .navbar.default-layout,
html.dark-mode .navbar-menu-wrapper {
    background: #1E293B !important;
    border-bottom: 1px solid #2D3748 !important;
}
html.dark-mode .navbar .nav-link,
html.dark-mode .navbar .welcome-text,
html.dark-mode .navbar .welcome-sub-text {
    color: #94A3B8 !important;
}
html.dark-mode .navbar .search-form input {
    background: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
html.dark-mode .card,
html.dark-mode .bc-card {
    background: var(--card-bg, #1E293B) !important;
    border-color: var(--card-border, #2D3748) !important;
    color: var(--bc-text, #E2E8F0) !important;
}
html.dark-mode .card-header,
html.dark-mode .bc-card-header {
    background: #0F172A !important;
    border-bottom-color: #2D3748 !important;
    color: var(--bc-text, #E2E8F0) !important;
}
html.dark-mode .card-footer,
html.dark-mode .bc-card-footer {
    background: #0F172A !important;
    border-top-color: #2D3748 !important;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
html.dark-mode .table,
html.dark-mode .bc-table {
    color: var(--bc-text, #E2E8F0) !important;
    border-color: #2D3748 !important;
}
html.dark-mode .table thead th,
html.dark-mode .bc-table thead th {
    background: #0F172A !important;
    border-color: #2D3748 !important;
    color: #94A3B8 !important;
}
html.dark-mode .table tbody tr:hover td,
html.dark-mode .bc-table tbody tr:hover td {
    background: rgba(59,130,246,.07) !important;
}
html.dark-mode .table td,
html.dark-mode .table th {
    border-color: #2D3748 !important;
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background: rgba(0,0,0,.12) !important;
}

/* ── Forms & Inputs ──────────────────────────────────────────────────── */
html.dark-mode .form-control,
html.dark-mode .bc-input,
html.dark-mode .bc-select,
html.dark-mode .bc-textarea {
    background: #1E293B !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .bc-input:focus {
    background: #1E293B !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}
html.dark-mode .form-control::placeholder,
html.dark-mode .bc-input::placeholder { color: #64748B !important; }

html.dark-mode label,
html.dark-mode .bc-label,
html.dark-mode .form-label { color: #CBD5E1 !important; }

/* ── Select2 (legacy) ────────────────────────────────────────────────── */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
    background: #1E293B !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}
html.dark-mode .select2-dropdown {
    background: #1E293B !important;
    border-color: #334155 !important;
}
html.dark-mode .select2-container--default .select2-results__option {
    color: #E2E8F0 !important;
}
html.dark-mode .select2-container--default .select2-results__option--highlighted {
    background: #334155 !important;
}

/* ── Dropdowns ───────────────────────────────────────────────────────── */
html.dark-mode .dropdown-menu,
html.dark-mode .navbar-dropdown {
    background: #1E293B !important;
    border-color: #2D3748 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
html.dark-mode .dropdown-item {
    color: #CBD5E1 !important;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background: rgba(59,130,246,.12) !important;
    color: #E2E8F0 !important;
}
html.dark-mode .dropdown-divider { border-color: #2D3748 !important; }
html.dark-mode .dropdown-header { color: #64748B !important; }

/* ── Modals ──────────────────────────────────────────────────────────── */
html.dark-mode .modal-content {
    background: #1E293B !important;
    border-color: #2D3748 !important;
    color: #E2E8F0 !important;
}
html.dark-mode .modal-header {
    border-bottom-color: #2D3748 !important;
    background: #0F172A !important;
}
html.dark-mode .modal-footer {
    border-top-color: #2D3748 !important;
    background: #0F172A !important;
}
html.dark-mode .modal-title { color: #E2E8F0 !important; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
html.dark-mode .alert-success {
    background: rgba(16,185,129,.15) !important;
    border-color: rgba(16,185,129,.3) !important;
    color: #6EE7B7 !important;
}
html.dark-mode .alert-danger {
    background: rgba(239,68,68,.15) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #FCA5A5 !important;
}
html.dark-mode .alert-warning {
    background: rgba(245,158,11,.15) !important;
    border-color: rgba(245,158,11,.3) !important;
    color: #FCD34D !important;
}
html.dark-mode .alert-info {
    background: rgba(59,130,246,.15) !important;
    border-color: rgba(59,130,246,.3) !important;
    color: #93C5FD !important;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
html.dark-mode .badge-light,
html.dark-mode .badge.bg-light {
    background: #334155 !important;
    color: #E2E8F0 !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */
html.dark-mode .breadcrumb { background: transparent !important; }
html.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #64748B !important; }
html.dark-mode .breadcrumb-item a { color: #60A5FA !important; }
html.dark-mode .breadcrumb-item.active { color: #94A3B8 !important; }

/* ── Page titles & text ──────────────────────────────────────────────── */
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,
html.dark-mode h4,html.dark-mode h5,html.dark-mode h6 {
    color: #E2E8F0 !important;
}
html.dark-mode .text-muted { color: #64748B !important; }
html.dark-mode .text-dark  { color: #CBD5E1 !important; }
html.dark-mode hr          { border-color: #2D3748 !important; }

/* ── Pagination ──────────────────────────────────────────────────────── */
html.dark-mode .page-link {
    background: #1E293B !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}
html.dark-mode .page-link:hover { background: #334155 !important; color: #E2E8F0 !important; }
html.dark-mode .page-item.active .page-link {
    background: var(--bc-primary, #0931A0) !important;
    border-color: var(--bc-primary, #0931A0) !important;
}
html.dark-mode .page-item.disabled .page-link { opacity: .4 !important; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
html.dark-mode .nav-tabs { border-bottom-color: #2D3748 !important; }
html.dark-mode .nav-tabs .nav-link {
    color: #94A3B8 !important;
    border-color: transparent !important;
}
html.dark-mode .nav-tabs .nav-link:hover { color: #E2E8F0 !important; border-color: #2D3748 !important; }
html.dark-mode .nav-tabs .nav-link.active {
    background: #1E293B !important;
    border-color: #2D3748 #2D3748 #1E293B !important;
    color: #60A5FA !important;
}

/* ── List groups ─────────────────────────────────────────────────────── */
html.dark-mode .list-group-item {
    background: #1E293B !important;
    border-color: #2D3748 !important;
    color: #CBD5E1 !important;
}
html.dark-mode .list-group-item:hover { background: #334155 !important; }
html.dark-mode .list-group-item.active {
    background: var(--bc-primary, #0931A0) !important;
    border-color: var(--bc-primary, #0931A0) !important;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
html.dark-mode .footer {
    background: #1E293B !important;
    border-top-color: #2D3748 !important;
    color: #64748B !important;
}

/**
 * Portal-Specific Overrides
 * These can be applied to specific portal layouts
 */

/* Admin Portal */
.portal-admin {
    --portal-gradient: var(--gradient-admin-partners);
    --portal-sidebar: var(--sidebar-admin);
    --portal-accent: var(--bc-primary);
}

/* Merchant Portal */
.portal-merchant {
    --portal-gradient: var(--gradient-merchant);
    --portal-sidebar: var(--sidebar-merchant);
    --portal-accent: var(--bc-secondary);
}

/* Partner Portal */
.portal-partner {
    --portal-gradient: var(--gradient-partner);
    --portal-sidebar: var(--sidebar-partner);
    --portal-accent: var(--bc-secondary);
}

/* Employee Portal */
.portal-employee {
    --portal-gradient: var(--gradient-employee);
    --portal-sidebar: var(--sidebar-employee);
    --portal-accent: var(--bc-metallic-dark);
}

/* Agency Portal */
.portal-agency {
    --portal-gradient: var(--gradient-agency);
    --portal-sidebar: var(--sidebar-admin);
    --portal-accent: var(--bc-primary);
}