/**
 * =============================================================================
 * PASS CONTROL — DESIGN TOKENS (Xiaomi HyperOS & Apple Glassmorphism Engine)
 * =============================================================================
 * High-performance, multi-layered design token architecture with frosted glass,
 * ambient background auroras, and fluid color-scheme transitions.
 */

/* -----------------------------------------------------------------------------
   1. PORCELAIN THEME (Light Mode)
   ----------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Base Canvas & Background */
    --bg: #F3F4F7;
    --bg-gradient: radial-gradient(circle at 15% 25%, rgba(255, 178, 140, 0.18) 0%, transparent 45%),
                   radial-gradient(circle at 80% 20%, rgba(140, 196, 255, 0.20) 0%, transparent 45%),
                   radial-gradient(circle at 50% 75%, rgba(196, 164, 255, 0.16) 0%, transparent 50%);

    /* Solid & Base Surfaces */
    --surface-1: #FFFFFF;
    --surface-2: #F8F9FC;
    --surface-3: #ECEEF4;

    /* Typography & Hierarchy */
    --text-1: #14161C;
    --text-2: rgba(20, 22, 28, 0.62);
    --text-3: rgba(20, 22, 28, 0.40);

    /* Outlines & Borders */
    --border: rgba(21, 27, 46, 0.08);
    --border-strong: rgba(21, 27, 46, 0.16);

    /* Accents & Brand Gradients */
    --accent-1: #4F6BFF;
    --accent-2: #8A5CFF;
    --accent-grad: linear-gradient(135deg, #4F6BFF, #8A5CFF);
    --accent-glow: rgba(79, 107, 255, 0.30);

    /* Semantic Status Tokens */
    --success: #10B981;
    --success-soft: rgba(16, 185, 129, 0.12);
    --success-border: rgba(16, 185, 129, 0.25);

    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --warning-border: rgba(245, 158, 11, 0.25);

    --danger: #F43F5E;
    --danger-soft: rgba(244, 63, 94, 0.12);
    --danger-border: rgba(244, 63, 94, 0.25);

    --info: #06B6D4;
    --info-soft: rgba(6, 182, 212, 0.12);
    --info-border: rgba(6, 182, 212, 0.25);

    /* Status Colors (Legacy Alias) */
    --status-success: var(--success);
    --status-warning: var(--warning);
    --status-danger: var(--danger);
    --status-info: var(--info);

    /* Elevation & Shadows */
    --shadow-sm: 0 2px 8px rgba(20, 25, 45, 0.04);
    --shadow-md: 0 8px 24px -2px rgba(20, 25, 45, 0.06);
    --shadow-card: 0 12px 40px rgba(20, 25, 45, 0.10);
    --shadow-glass: 0 12px 36px rgba(20, 25, 45, 0.08);

    /* Frosted Glass Recipe (Tier 2 Surface) */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38));
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    /* Geometry Tokens */
    --radius-card: 20px;
    --radius-control: 12px;
    --radius-pill: 999px;

    /* Backward-compatibility token bridges */
    --pc-bg: var(--bg);
    --pc-card-bg: var(--surface-1);
    --pc-card-elevated: var(--surface-2);
    --pc-text: var(--text-1);
    --pc-text-muted: var(--text-2);
    --pc-border: var(--border);
    --pc-primary: var(--accent-1);
    --pc-primary-light: var(--accent-2);
    --pc-accent: var(--success);
    --pc-warning: var(--warning);
    --pc-danger: var(--danger);
    --pc-info: var(--info);
    --pc-shadow: var(--shadow-sm);
    --pc-shadow-md: var(--shadow-md);
    --pc-shadow-lg: var(--shadow-card);
    --pc-glass-bg: var(--glass-bg);
    --pc-glass-border: var(--glass-border);
}

/* -----------------------------------------------------------------------------
   2. OBSIDIAN THEME (Dark Mode)
   ----------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    /* Base Canvas & Background */
    --bg: #07080C;
    --bg-gradient: radial-gradient(circle at 20% 20%, rgba(109, 141, 255, 0.14) 0%, transparent 45%),
                   radial-gradient(circle at 80% 30%, rgba(164, 107, 255, 0.10) 0%, transparent 40%),
                   radial-gradient(circle at 50% 80%, rgba(89, 213, 232, 0.07) 0%, transparent 50%);

    /* Solid & Base Surfaces */
    --surface-1: #101218;
    --surface-2: #161A24;
    --surface-3: #1E2332;

    /* Typography & Hierarchy */
    --text-1: #F4F6FA;
    --text-2: rgba(240, 243, 250, 0.62);
    --text-3: rgba(240, 243, 250, 0.38);

    /* Outlines & Borders */
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* Accents & Brand Gradients */
    --accent-1: #6D8DFF;
    --accent-2: #A46BFF;
    --accent-grad: linear-gradient(135deg, #6D8DFF, #A46BFF);
    --accent-glow: rgba(109, 141, 255, 0.30);

    /* Semantic Status Tokens */
    --success: #10B981;
    --success-soft: rgba(16, 185, 129, 0.14);
    --success-border: rgba(16, 185, 129, 0.28);

    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --warning-border: rgba(245, 158, 11, 0.28);

    --danger: #F43F5E;
    --danger-soft: rgba(244, 63, 94, 0.14);
    --danger-border: rgba(244, 63, 94, 0.28);

    --info: #06B6D4;
    --info-soft: rgba(6, 182, 212, 0.14);
    --info-border: rgba(6, 182, 212, 0.28);

    /* Status Colors (Legacy Alias) */
    --status-success: var(--success);
    --status-warning: var(--warning);
    --status-danger: var(--danger);
    --status-info: var(--info);

    /* Elevation & Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px -2px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.38);
    --shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.45);

    /* Frosted Glass Recipe (Tier 2 Surface) */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* Geometry Tokens */
    --radius-card: 20px;
    --radius-control: 12px;
    --radius-pill: 999px;

    /* Backward-compatibility token bridges */
    --pc-bg: var(--bg);
    --pc-card-bg: var(--surface-1);
    --pc-card-elevated: var(--surface-2);
    --pc-text: var(--text-1);
    --pc-text-muted: var(--text-2);
    --pc-border: var(--border);
    --pc-primary: var(--accent-1);
    --pc-primary-light: var(--accent-2);
    --pc-accent: var(--success);
    --pc-warning: var(--warning);
    --pc-danger: var(--danger);
    --pc-info: var(--info);
    --pc-shadow: var(--shadow-sm);
    --pc-shadow-md: var(--shadow-md);
    --pc-shadow-lg: var(--shadow-card);
    --pc-glass-bg: var(--glass-bg);
    --pc-glass-border: var(--glass-border);
}

/* -----------------------------------------------------------------------------
   3. GLOBAL AMBIENT CANVAS & TRANSITIONS
   ----------------------------------------------------------------------------- */
html {
    background-color: var(--bg);
    transition: background-color 280ms cubic-bezier(0.32, 0.72, 0, 1),
                color 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

body {
    background: var(--bg);
    color: var(--text-1);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    transition: background-color 280ms cubic-bezier(0.32, 0.72, 0, 1),
                color 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Tabular Numbers for Data Accuracy */
.tabular-nums,
.stat-value,
.kpi-value,
.table td strong {
    font-variant-numeric: tabular-nums;
}

/* Ambient Radial Glow Canvas */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-gradient);
    filter: blur(90px);
    pointer-events: none;
    z-index: -2;
    transform: translateZ(0);
}

/* Organic Micro-Noise Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.025;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* -----------------------------------------------------------------------------
   4. HYPEROS FROSTED GLASS ENGINE (.glass, .glass-card, .glass-pill)
   ----------------------------------------------------------------------------- */
.glass,
.glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight), var(--shadow-glass) !important;
    border-radius: var(--radius-card);
    position: relative;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 220ms cubic-bezier(0.32, 0.72, 0, 1),
                border-color 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.glass-sm {
    border-radius: var(--radius-control) !important;
}

.glass-pill {
    border-radius: var(--radius-pill) !important;
}

/* Fallback for non-supporting browsers */
@supports not (backdrop-filter: blur(1px)) {
    .glass,
    .glass-card {
        background: var(--surface-1) !important;
    }
}

/* HyperOS Glass Micro-Utilities & Scale Extensions */
.extra-small {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}

.btn-xs {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    line-height: 1.25 !important;
}

.btn-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.form-select-xs {
    padding: 0.2rem 1.6rem 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    line-height: 1.25 !important;
}

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

/* Fractional Spacing Extensions (8pt grid alignment) */
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.me-1\.5 { margin-right: 0.375rem !important; }

/* Theme bridging for Bootstrap 5.3 Surface utilities */
[data-theme="dark"] .bg-body {
    background-color: var(--surface-1) !important;
    color: var(--text-1) !important;
}

[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--surface-2) !important;
    color: var(--text-2) !important;
}

[data-theme="dark"] .card-header.bg-body-tertiary {
    background-color: var(--surface-2) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .modal-footer.bg-body-tertiary {
    background-color: rgba(22, 26, 36, 0.85) !important;
    border-top-color: var(--border) !important;
}

/* Accessibility Focus Ring */
:focus-visible {
    outline: 2px solid var(--accent-1) !important;
    outline-offset: 2px !important;
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body::before {
        filter: none !important;
    }
}