/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

/* Last Updated: 2024-12-19 */

:root {
    /* ---- Primary Colors ---- */
    --bg-primary: #1c1c1e;
    --bg-secondary: #212123;
    --bg-tertiary: #3a3a3c;
    --text-primary: #ffffff;
    --text-secondary: #aeaeb2;
    --text-muted: #8e8e93;
    --text-placeholder: #6a6a6c;
    /* ---- Border Colors ---- */
    --border-subtle: #999999;
    --border-color: #5a5a5c;
    --border-hover: #7a7a7c;
    --border-container: #4a4a4c;
    /* ---- Accent Colors ---- */
    --accent-blue: #5a7c8a;
    --accent-blue-hover: #4a6b7a;
    --accent-primary: #5a7c8a;
    --surface-hover: rgba(90, 124, 138, 0.08);
    --surface-secondary: #3a3a3c;
    /* ---- Status Colors ---- */
    --error-low: #ffd54f;
    --error-medium: #ff9800;
    --error-high: #f44336;
    --error-critical: #d32f2f;
    --success-green: #3d8f40;
    --success-green-hover: #2e7d32;
    /* ---- Typography ---- */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* ---- Interactive Elements ---- */
    --link-color: #0071c1;
    --btn-primary-bg: #1b6ec2;
    --btn-primary-border: #1861ac;
    --form-focus-shadow: rgba(90, 124, 138, 0.1);
    /* ---- Loading & Progress ---- */
    --loading-progress-stroke: #1b6ec2;
    --loading-circle-stroke: #e0e0e0;
    /* ---- Error System ---- */
    --blazor-error-bg: lightyellow;
    --blazor-error-boundary-bg: #b32121;
    /* ---- Error Tooltip Severity Colors ---- */
    --error-severity-low: #856404;
    --error-severity-medium: #b45309;
    --error-severity-high: #721c24;
    --error-severity-critical: #4a148c;
    /* ---- Button Variants ---- */
    --clear-btn-hover: #ababab;
    --clear-btn-active: #e0e0e0;
    /* ---- Layout & Spacing ---- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --spacing-2xl: 2rem;
    /* ---- Border Radius ---- */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --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.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    /* ---- Transitions ---- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    /* ---- Component-Specific Measurements ---- */
    --quadrant-gap: 0px;
    --quadrant-border-width: 1px;
    --quadrant-header-height: 54px;
    --quadrant-header-padding: 0.5rem 0.3rem 0.5rem 1rem;
    --quadrant-content-padding: 0.5rem;
    /* ---- Form Elements ---- */
    --form-border-radius: 6px;
    --form-padding: 0.75rem 1rem;
    --form-font-size: 0.875rem;
    --form-min-width: 250px;
    /* ---- Z-Index Scale ---- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}