/* LegalHub Design System Tokens - High-End Legal Editorial */
/* Based on: .claude/brand-guidelines.md */

:root {
    /* ========================================
       SURFACE COLORS - Tonal Architecture
       "No-Line Rule" - Use background shifts instead of borders
       ======================================== */

    /* Base canvas */
    --surface: #f8f9ff;

    /* Surface container hierarchy (light to dark) */
    --surface-container-lowest: #ffffff;   /* Floating/lifted cards */
    --surface-container-low: #eff4ff;      /* Subtle grouping */
    --surface-container: #e5ecf9;          /* Standard containers */
    --surface-container-high: #dde5f6;     /* Emphasized containers */
    --surface-container-highest: #d5e3fc;  /* Critical utility panels */

    /* Surface aliases */
    --content-bg: var(--surface-container-lowest);
    --surface-border: var(--outline-variant);
    --bg-secondary: var(--surface-container-low);
    --surface-hover: var(--surface-container-low);

    /* ========================================
       PRIMARY COLORS - Cobalt Brand
       ======================================== */

    --primary: #003ec7;            /* Primary brand color (cobalt) */
    --primary-dark: #002a8a;       /* Darker shade of primary */
    --primary-container: #0052ff;  /* Gradient endpoint, lighter containers */
    --on-primary: #ffffff;         /* Text on primary */
    --on-primary-container: #001d66; /* Text on primary container */

    /* Primary gradient for CTAs (135deg) */
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

    /* ========================================
       SECONDARY COLORS
       ======================================== */

    --secondary: #4a5f7f;           /* Secondary actions */
    --secondary-container: #cfdce9; /* Secondary backgrounds */
    --on-secondary: #ffffff;        /* Text on secondary */
    --on-secondary-container: #07263f; /* Text on secondary container */

    /* ========================================
       TERTIARY COLORS - Teal Accent
       ======================================== */

    --tertiary: #006874;            /* Teal accent */
    --tertiary-container: #9ef0ff;  /* Teal backgrounds */
    --on-tertiary: #ffffff;         /* Text on tertiary */
    --on-tertiary-container: #001f24; /* Text on tertiary container */

    /* ========================================
       ACCENT COLORS
       ======================================== */

    --accent: var(--primary);           /* Accent color (primary by default) */
    --accent-subtle: rgba(0, 62, 199, 0.1);  /* Subtle accent background */

    /* ========================================
       SIDEBAR COLORS
       ======================================== */

    --sidebar-bg: #ffffff;
    --sidebar-border: var(--ghost-border);
    --sidebar-text: var(--on-surface-variant);
    --sidebar-text-active: var(--primary);
    --sidebar-hover-bg: var(--surface-container-low);
    --sidebar-active-bg: var(--surface-container);

    /* ========================================
       TEXT COLORS
       "Never use pure black (#000000)"
       ======================================== */

    --on-surface: #0d1c2e;           /* Primary text (authoritative navy) */
    --on-surface-variant: #434656;   /* Secondary text (reduced visual noise) */
    --on-background: #191c20;        /* Background text */

    /* Text color aliases */
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: #757681;
    --text-danger: var(--error);

    /* ========================================
       UTILITY COLORS - Status & Feedback
       ======================================== */

    /* Error */
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error: #ffffff;
    --on-error-container: #410002;

    /* Danger (alias for error) */
    --danger: var(--error);

    /* Success */
    --success: #16a34a;
    --success-container: #d1fae5;
    --on-success: #ffffff;
    --on-success-container: #05401a;

    /* Warning */
    --warning: #d97706;
    --warning-container: #fed7aa;
    --on-warning: #ffffff;
    --on-warning-container: #451a00;

    /* Info */
    --info: #0284c7;
    --info-container: #d3e4fd;
    --on-info: #ffffff;
    --on-info-container: #001c3b;

    /* ========================================
       OUTLINE & BORDER COLORS
       "Ghost Border" - Use at 20% opacity only
       ======================================== */

    --outline: #757681;              /* Standard outlines */
    --outline-variant: #c3c5d9;      /* Subtle outlines (use at 20% opacity) */

    /* Pre-calculated ghost borders */
    --ghost-border: rgba(195, 197, 217, 0.2); /* outline-variant at 20% */

    /* Border color aliases */
    --border-primary: var(--outline-variant);
    --border-secondary: var(--ghost-border);
    --border-color: var(--outline-variant);

    /* Color aliases for backward compatibility */
    --primary-color: var(--primary);
    --primary-hover: #005a9c;
    --success-bg: var(--success-container);
    --success-color: var(--success);
    --warning-bg: var(--warning-container);
    --warning-color: var(--warning);

    /* Grayscale aliases */
    --gray-100: #e9ecef;
    --gray-500: #6c757d;

    /* Surface aliases */
    --surface-secondary: var(--surface-container-low);

    /* Radius aliases */
    --radius-md: var(--radius-large);

    /* ========================================
       TYPOGRAPHY - Editorial Voice
       Inter (All text styles)
       ======================================== */

    /* Font Families */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: var(--font-body);  /* Alias for UI components */

    /* Display (Inter) - Architectural */
    --display-lg-size: 57px;
    --display-lg-line-height: 64px;
    --display-lg-weight: 600;

    --display-md-size: 45px;
    --display-md-line-height: 52px;
    --display-md-weight: 600;

    --display-sm-size: 36px;
    --display-sm-line-height: 44px;
    --display-sm-weight: 600;

    /* Headline (Inter) - Architectural */
    --headline-lg-size: 32px;
    --headline-lg-line-height: 40px;
    --headline-lg-weight: 600;

    --headline-md-size: 28px;
    --headline-md-line-height: 36px;
    --headline-md-weight: 600;

    --headline-sm-size: 24px;
    --headline-sm-line-height: 32px;
    --headline-sm-weight: 600;

    /* Title (Inter) - Functional */
    --title-lg-size: 22px;
    --title-lg-line-height: 28px;
    --title-lg-weight: 600;

    --title-md-size: 16px;
    --title-md-line-height: 24px;
    --title-md-weight: 600;

    --title-sm-size: 14px;
    --title-sm-line-height: 20px;
    --title-sm-weight: 600;

    /* Body (Inter) - Functional */
    --body-lg-size: 16px;
    --body-lg-line-height: 24px;
    --body-lg-weight: 400;

    --body-md-size: 14px;
    --body-md-line-height: 20px;
    --body-md-weight: 400;

    --body-sm-size: 12px;
    --body-sm-line-height: 16px;
    --body-sm-weight: 400;

    /* Label (Inter) - Functional */
    --label-lg-size: 14px;
    --label-lg-line-height: 20px;
    --label-lg-weight: 500;

    --label-md-size: 12px;
    --label-md-line-height: 16px;
    --label-md-weight: 500;

    --label-sm-size: 11px;
    --label-sm-line-height: 16px;
    --label-sm-weight: 500;

    /* Typography aliases for components */
    --body-size: var(--body-md-size);
    --body-weight: var(--body-md-weight);
    --label-size: var(--label-md-size);
    --label-weight: var(--label-md-weight);
    --small-size: var(--body-sm-size);
    --small-weight: var(--body-sm-weight);
    --section-title-size: var(--title-lg-size);
    --section-title-weight: var(--title-lg-weight);
    --page-title-size: var(--headline-md-size);
    --page-title-weight: var(--headline-md-weight);

    /* Font size aliases (for backward compatibility) */
    --font-size-base: var(--body-md-size); /* 14px - Base font size */
    --font-size-lg: var(--body-lg-size);
    --font-size-md: var(--body-md-size);
    --font-size-sm: var(--body-sm-size);
    --font-size-xs: var(--label-sm-size); /* 11px - Extra small text */

    /* ========================================
       SPACING SYSTEM - 4px Base Grid
       "If you think there is enough space, add spacing-4 more"
       ======================================== */

    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-14: 56px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;

    /* Semantic spacing aliases */
    --space-component-internal: var(--spacing-4);  /* Buttons, inputs, small cards */
    --space-section: var(--spacing-8);             /* Between major UI sections */
    --space-editorial: var(--spacing-16);          /* Hero sections, case headers */

    /* Component spacing aliases (for backward compatibility) */
    --space-1: var(--spacing-1);
    --space-2: var(--spacing-2);
    --space-3: var(--spacing-3);
    --space-4: var(--spacing-4);
    --space-5: var(--spacing-5);
    --space-6: var(--spacing-6);
    --space-8: var(--spacing-8);

    /* ========================================
       BORDER RADIUS - The Softening Rule
       "Always use rounded-md (0.375rem) as minimum"
       ======================================== */

    --rounded-sm: 0.25rem;    /* 4px - Small elements like badges */
    --rounded-md: 0.375rem;   /* 6px - Standard buttons, inputs, cards */
    --rounded-lg: 0.5rem;     /* 8px - Larger cards, modals */

    /* Component-specific border radius */
    --button-border-radius: var(--rounded-sm);  /* 4px - Subtle button radius */
    --rounded-xl: 0.75rem;    /* 12px - Hero cards, feature sections */
    --rounded-2xl: 1rem;      /* 16px - Special showcase elements */
    --rounded-full: 9999px;   /* Avatar images, pill buttons */

    /* Border radius aliases (for backward compatibility) */
    --radius-sm: var(--rounded-sm);
    --radius-md: var(--rounded-md);
    --radius-lg: var(--rounded-lg);
    --radius-xl: var(--rounded-xl);
    --radius-2xl: var(--rounded-2xl);
    --radius-full: var(--rounded-full);

    /* ========================================
       ELEVATION & DEPTH - Tinted Shadows
       "Shadows should be tinted with on-surface, not dead gray"
       ======================================== */

    /* Level 0: No elevation (rely on background color shift) */
    --elevation-0: none;

    /* Level 1: Subtle lift */
    --elevation-1:
        0px 1px 2px rgba(13, 28, 46, 0.03),
        0px 1px 3px rgba(13, 28, 46, 0.04);

    /* Level 2: Card elevation */
    --elevation-2:
        0px 2px 6px rgba(13, 28, 46, 0.04),
        0px 4px 12px rgba(13, 28, 46, 0.05);

    /* Level 3: Dropdown/popover */
    --elevation-3:
        0px 6px 16px rgba(13, 28, 46, 0.06),
        0px 12px 32px rgba(13, 28, 46, 0.08);

    /* Level 4: Modal/dialog */
    --elevation-4:
        0px 16px 48px rgba(13, 28, 46, 0.10),
        0px 24px 64px rgba(13, 28, 46, 0.12);

    /* ========================================
       GLASSMORPHISM - Floating Elements
       ======================================== */

    --glass-background: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(12px);
    --glass-border: var(--ghost-border);

    /* ========================================
       COMPONENT DIMENSIONS
       ======================================== */

    /* Buttons */
    --button-height: 40px;
    --button-height-small: 32px;
    --button-height-large: 48px;
    --button-padding-x: var(--spacing-5); /* 20px */
    --button-padding-y: var(--spacing-3); /* 12px */

    /* Inputs */
    --input-height: 44px;
    --input-padding-x: var(--spacing-4); /* 16px */
    --input-padding-y: var(--spacing-3); /* 12px */

    /* Cards */
    --card-padding: var(--spacing-6);           /* 24px - Standard card */
    --card-padding-large: var(--spacing-8);     /* 32px - Emphasized card */
    --card-padding-editorial: var(--spacing-10); /* 40px - Editorial layouts */
    --card-border-radius: var(--rounded-lg);
    --card-shadow: var(--elevation-1);

    /* Icons */
    --icon-nav: 20px;      /* Navigation icons */
    --icon-stat: 40px;     /* Stat card icons */

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;
    --content-padding: var(--spacing-4);  /* 32px */
    --content-max-width: 1280px;

    /* Tables */
    --table-row-height: 52px;
    --table-header-height: 48px;

    /* ========================================
       ANIMATION & MOTION
       ======================================== */

    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Common transitions */
    --transition-all: all var(--transition-base) var(--transition-easing);
    --transition-colors: background-color var(--transition-base) var(--transition-easing),
                         color var(--transition-base) var(--transition-easing),
                         border-color var(--transition-base) var(--transition-easing);
    --transition-transform: transform var(--transition-base) var(--transition-easing);

    /* ========================================
       BACKDROP & OVERLAYS
       ======================================== */

    --backdrop-modal: rgba(13, 28, 46, 0.4);
    --backdrop-drawer: rgba(13, 28, 46, 0.3);
    --modal-backdrop: var(--backdrop-modal);  /* Alias */
    --modal-border-radius: var(--rounded-xl);

    /* ========================================
       FOCUS STATES - Accessibility
       ======================================== */

    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--primary);

    /* ========================================
       RESPONSIVE BREAKPOINTS
       ======================================== */

    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1440px;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */

    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
}

/* ========================================
   UTILITY CLASSES - Editorial Patterns
   ======================================== */

/* Typography classes */
.display-lg {
    font-family: var(--font-display);
    font-size: var(--display-lg-size);
    line-height: var(--display-lg-line-height);
    font-weight: var(--display-lg-weight);
}

.display-md {
    font-family: var(--font-display);
    font-size: var(--display-md-size);
    line-height: var(--display-md-line-height);
    font-weight: var(--display-md-weight);
}

.display-sm {
    font-family: var(--font-display);
    font-size: var(--display-sm-size);
    line-height: var(--display-sm-line-height);
    font-weight: var(--display-sm-weight);
}

.headline-lg {
    font-family: var(--font-display);
    font-size: var(--headline-lg-size);
    line-height: var(--headline-lg-line-height);
    font-weight: var(--headline-lg-weight);
}

.headline-md {
    font-family: var(--font-display);
    font-size: var(--headline-md-size);
    line-height: var(--headline-md-line-height);
    font-weight: var(--headline-md-weight);
}

.headline-sm {
    font-family: var(--font-display);
    font-size: var(--headline-sm-size);
    line-height: var(--headline-sm-line-height);
    font-weight: var(--headline-sm-weight);
}

.title-lg {
    font-family: var(--font-body);
    font-size: var(--title-lg-size);
    line-height: var(--title-lg-line-height);
    font-weight: var(--title-lg-weight);
}

.title-md {
    font-family: var(--font-body);
    font-size: var(--title-md-size);
    line-height: var(--title-md-line-height);
    font-weight: var(--title-md-weight);
}

.title-sm {
    font-family: var(--font-body);
    font-size: var(--title-sm-size);
    line-height: var(--title-sm-line-height);
    font-weight: var(--title-sm-weight);
}

.body-lg {
    font-family: var(--font-body);
    font-size: var(--body-lg-size);
    line-height: var(--body-lg-line-height);
    font-weight: var(--body-lg-weight);
}

.body-md {
    font-family: var(--font-body);
    font-size: var(--body-md-size);
    line-height: var(--body-md-line-height);
    font-weight: var(--body-md-weight);
}

.body-sm {
    font-family: var(--font-body);
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line-height);
    font-weight: var(--body-sm-weight);
}

.label-lg {
    font-family: var(--font-body);
    font-size: var(--label-lg-size);
    line-height: var(--label-lg-line-height);
    font-weight: var(--label-lg-weight);
}

.label-md {
    font-family: var(--font-body);
    font-size: var(--label-md-size);
    line-height: var(--label-md-line-height);
    font-weight: var(--label-md-weight);
}

.label-sm {
    font-family: var(--font-body);
    font-size: var(--label-sm-size);
    line-height: var(--label-sm-line-height);
    font-weight: var(--label-sm-weight);
}

/* Surface utility classes */
.surface { background-color: var(--surface); }
.surface-container-lowest { background-color: var(--surface-container-lowest); }
.surface-container-low { background-color: var(--surface-container-low); }
.surface-container { background-color: var(--surface-container); }
.surface-container-high { background-color: var(--surface-container-high); }
.surface-container-highest { background-color: var(--surface-container-highest); }

/* Text color utilities */
.text-primary { color: var(--on-surface); }
.text-secondary { color: var(--on-surface-variant); }
.text-tertiary { color: var(--on-background); }

/* Elevation utilities */
.elevation-0 { box-shadow: var(--elevation-0); }
.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }
.elevation-4 { box-shadow: var(--elevation-4); }

/* Glassmorphism utility */
.glass {
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* Editorial spacing utilities */
.space-editorial { padding: var(--spacing-16); }
.space-section { padding: var(--spacing-8); }

/* Case Header signature component */
.case-header {
    background: var(--surface-container-highest);
    padding: var(--spacing-16) var(--spacing-12);
    border-radius: var(--rounded-lg);
    margin-bottom: var(--spacing-12);
}

.case-header__title {
    font-family: var(--font-display);
    font-size: var(--display-sm-size);
    line-height: var(--display-sm-line-height);
    font-weight: var(--display-sm-weight);
    color: var(--on-surface);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    :root {
        /* Reduce typography scale by 15% on mobile */
        --display-lg-size: 48px;
        --display-md-size: 38px;
        --display-sm-size: 30px;
        --headline-lg-size: 27px;
        --headline-md-size: 24px;
        --headline-sm-size: 20px;

        /* Reduce spacing on mobile */
        --content-padding: var(--spacing-4);
        --card-padding: var(--spacing-4);
        --card-padding-large: var(--spacing-6);
        --space-editorial: var(--spacing-8);
    }
}

@media (min-width: 1440px) {
    :root {
        /* Increase editorial spacing on wide screens */
        --space-editorial: var(--spacing-24);
    }
}

/* ========================================
   DARK MODE THEME
   ======================================== */

[data-theme="dark"] {
    /* ========================================
       SURFACE COLORS - Dark Mode
       ======================================== */

    /* Base canvas */
    --surface: #0d1117;

    /* Surface container hierarchy (dark to light) */
    --surface-container-lowest: #010409;   /* Floating/lifted cards */
    --surface-container-low: #1b232d;      /* Subtle grouping */
    --surface-container: #1c2128;          /* Standard containers */
    --surface-container-high: #22272e;     /* Emphasized containers */
    --surface-container-highest: #2d333b;  /* Critical utility panels */

    /* Surface aliases */
    --content-bg: var(--surface-container-lowest);
    --surface-border: rgba(240, 246, 252, 0.1);
    --bg-secondary: var(--surface-container-low);
    --surface-hover: var(--surface-container-low);

    /* ========================================
       PRIMARY COLORS - Dark Mode
       ======================================== */

    --primary: #1f6feb;            /* Lighter cobalt for dark mode */
    --primary-dark: #1158c7;       /* Darker shade of primary for dark mode */
    --primary-container: #388bfd;  /* Gradient endpoint */
    --on-primary: #ffffff;
    --on-primary-container: #cfe8ff;

    /* Primary gradient for CTAs (135deg) */
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

    /* ========================================
       SECONDARY COLORS - Dark Mode
       ======================================== */

    --secondary: #8b949e;
    --secondary-container: #21262d;
    --on-secondary: #ffffff;
    --on-secondary-container: #c9d1d9;

    /* ========================================
       TERTIARY COLORS - Dark Mode
       ======================================== */

    --tertiary: #3fb950;
    --tertiary-container: #1c2d20;
    --on-tertiary: #ffffff;
    --on-tertiary-container: #aff5b4;

    /* ========================================
       ACCENT COLORS - Dark Mode
       ======================================== */

    --accent: var(--primary);
    --accent-subtle: rgba(31, 111, 235, 0.15);

    /* ========================================
       SIDEBAR COLORS - Dark Mode
       ======================================== */

    --sidebar-bg: #0d1117;
    --sidebar-border: rgba(240, 246, 252, 0.1);
    --sidebar-text: #8b949e;
    --sidebar-text-active: var(--primary);
    --sidebar-hover-bg: var(--surface-container-low);
    --sidebar-active-bg: var(--surface-container);

    /* ========================================
       TEXT COLORS - Dark Mode
       ======================================== */

    --on-surface: #e6edf3;           /* Primary text */
    --on-surface-variant: #8b949e;   /* Secondary text */
    --on-background: #c9d1d9;        /* Background text */

    /* Text color aliases */
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: #6e7681;
    --text-danger: var(--error);

    /* ========================================
       UTILITY COLORS - Dark Mode
       ======================================== */

    /* Error */
    --error: #f85149;
    --error-container: #2d1417;
    --on-error: #ffffff;
    --on-error-container: #ffdcd7;

    /* Danger (alias for error) */
    --danger: var(--error);

    /* Success */
    --success: #3fb950;
    --success-container: #1c2d20;
    --on-success: #ffffff;
    --on-success-container: #aff5b4;

    /* Warning */
    --warning: #d29922;
    --warning-container: #2d2414;
    --on-warning: #ffffff;
    --on-warning-container: #fae17d;

    /* Info */
    --info: #58a6ff;
    --info-container: #1c2d41;
    --on-info: #ffffff;
    --on-info-container: #cfe8ff;

    /* ========================================
       OUTLINE & BORDER COLORS - Dark Mode
       ======================================== */

    --outline: #484f58;
    --outline-variant: #30363d;

    /* Pre-calculated ghost borders */
    --ghost-border: rgba(240, 246, 252, 0.1);

    /* Border color aliases */
    --border-primary: var(--outline-variant);
    --border-secondary: var(--ghost-border);
    --border-color: var(--outline-variant);

    /* Color aliases for backward compatibility */
    --primary-color: var(--primary);
    --primary-hover: #388bfd;
    --success-bg: var(--success-container);
    --success-color: var(--success);
    --warning-bg: var(--warning-container);
    --warning-color: var(--warning);

    /* Grayscale aliases */
    --gray-100: #21262d;
    --gray-500: #8b949e;

    /* Surface aliases */
    --surface-secondary: var(--surface-container-low);

    /* ========================================
       ELEVATION & DEPTH - Dark Mode
       ======================================== */

    /* Level 1: Subtle lift */
    --elevation-1:
        0px 1px 2px rgba(0, 0, 0, 0.3),
        0px 1px 3px rgba(0, 0, 0, 0.4);

    /* Level 2: Card elevation */
    --elevation-2:
        0px 2px 6px rgba(0, 0, 0, 0.4),
        0px 4px 12px rgba(0, 0, 0, 0.5);

    /* Level 3: Dropdown/popover */
    --elevation-3:
        0px 6px 16px rgba(0, 0, 0, 0.5),
        0px 12px 32px rgba(0, 0, 0, 0.6);

    /* Level 4: Modal/dialog */
    --elevation-4:
        0px 16px 48px rgba(0, 0, 0, 0.6),
        0px 24px 64px rgba(0, 0, 0, 0.7);

    /* ========================================
       GLASSMORPHISM - Dark Mode
       ======================================== */

    --glass-background: rgba(13, 17, 23, 0.8);
    --glass-blur: blur(12px);
    --glass-border: var(--ghost-border);

    /* ========================================
       BACKDROP & OVERLAYS - Dark Mode
       ======================================== */

    --backdrop-modal: rgba(1, 4, 9, 0.6);
    --backdrop-drawer: rgba(1, 4, 9, 0.5);
    --modal-backdrop: var(--backdrop-modal);
}