:root {
    --hw-accent-primary: rgb(0, 163, 224);
    --hw-accent-primary-hover: rgb(0, 144, 212);
    --hw-accent-secondary: #00B0EB;
    
    /* =========================================================================
       DARK THEME (Default)
       ========================================================================= */
    
    /* Backgrounds */
    --hw-bg-base: #1c232d;
    --hw-bg-deep: #020818;
    --hw-bg-page: #020818;
    
    /* Card & Surface */
    --hw-card-bg: rgb(44, 53, 68);
    --hw-surface-bg: rgba(30, 41, 59, 0.92);
    --hw-surface-bg-hover: rgba(27, 38, 54, 0.98);
    
    /* Borders */
    --hw-border-subtle: rgba(255, 255, 255, 0.08);
    --hw-border-default: rgba(255, 255, 255, 0.10);
    --hw-border-medium: rgba(255, 255, 255, 0.18);
    --hw-border-accent: rgba(0, 176, 235, 0.16);
    --hw-border-accent-hover: rgba(0, 176, 235, 0.40);
    --hw-border-strong: rgba(148, 163, 184, 0.30);
    
    /* Text */
    --hw-text-primary: rgba(255, 255, 255, 0.92);
    --hw-text-secondary: rgba(247, 247, 247, 0.9);
    --hw-text-muted: rgba(247, 247, 247, 0.75);
    --hw-text-subtle: rgba(247, 247, 247, 0.65);
    --hw-text-faint: rgba(247, 247, 247, 0.55);
    --hw-text-link: rgba(255, 255, 255, 0.85);
    --hw-text-heading: #f7f7f7;
    
    /* Form-specific tokens */
    --hw-form-bg: rgba(30, 41, 59, 0.92);
    --hw-form-border: rgba(0, 176, 235, 0.16);
    --hw-form-text: rgba(226, 232, 240, 0.96);
    --hw-form-muted: rgba(226, 232, 240, 0.68);
    --hw-form-readonly-bg: rgba(2, 8, 24, 0.60);
    --hw-form-readonly-text: rgba(226, 232, 240, 0.72);
    
    /* =========================================================================
       STATUS COLORS
       ========================================================================= */
    
    /* Triage / Warning (Orange/Amber) */
    --hw-status-triage: rgb(245, 158, 11);
    --hw-status-triage-bg: rgba(245, 158, 11, 0.16);
    --hw-status-triage-border: rgba(245, 158, 11, 0.50);
    
    /* In Progress (Blue) */
    --hw-status-progress: rgb(39, 144, 236);
    --hw-status-progress-bg: rgba(39, 144, 236, 0.14);
    --hw-status-progress-border: rgba(39, 144, 236, 0.50);
    
    /* Resolved / Success (Green) */
    --hw-status-resolved: rgb(34, 197, 94);
    --hw-status-resolved-bg: rgba(34, 197, 94, 0.12);
    --hw-status-resolved-border: rgba(34, 197, 94, 0.50);
    
    /* Closed / Neutral (Gray) */
    --hw-status-closed-bg: rgba(255, 255, 255, 0.10);
    --hw-status-closed-border: rgba(255, 255, 255, 0.22);
    --hw-status-closed-text: rgba(255, 255, 255, 0.82);
    
    /* =========================================================================
       ICON ACCENT COLORS
       ========================================================================= */
    --hw-icon-cases: rgb(0, 176, 235);
    --hw-icon-cases-bg: rgba(0, 176, 235, 0.22);
    
    --hw-icon-newcase: rgb(245, 158, 11);
    --hw-icon-newcase-bg: rgba(245, 158, 11, 0.16);
    
    --hw-icon-docs: rgb(95, 192, 207);
    --hw-icon-docs-bg: rgba(95, 192, 207, 0.16);
    
    --hw-icon-settings: var(--hw-text-muted);
    --hw-icon-settings-bg: rgba(255, 255, 255, 0.10);
    
    /* =========================================================================
       SPACING
       ========================================================================= */
    --hw-space-xs: 4px;
    --hw-space-sm: 8px;
    --hw-space-md: 14px;
    --hw-space-lg: 18px;
    --hw-space-xl: 28px;
    
    --hw-gap-default: 14px;
    --hw-padding-card: 18px;
    
    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --hw-radius-sm: 0.5rem;
    --hw-radius-md: 10px;
    --hw-radius-lg: 12px;
    --hw-radius-xl: 16px;
    --hw-radius-pill: 999px;
    
    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */
    --hw-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font sizes */
    --hw-font-size-xs: 12px;
    --hw-font-size-sm: 13px;
    --hw-font-size-base: 14px;
    --hw-font-size-md: 15px;
    --hw-font-size-lg: 16px;
    --hw-font-size-xl: 18px;
    --hw-font-size-2xl: 20px;
    --hw-font-size-3xl: 24px;
    --hw-font-size-4xl: 30px;
    --hw-font-size-5xl: 40px;
    
    /* Line heights */
    --hw-line-height-tight: 1.15;
    --hw-line-height-snug: 1.2;
    --hw-line-height-normal: 1.55;
    --hw-line-height-relaxed: 1.6;
    
    /* =========================================================================
       SHADOWS
       ========================================================================= */
    --hw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --hw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hw-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
    
    /* =========================================================================
       FOCUS STATES
       ========================================================================= */
    --hw-focus-ring: 2px solid rgba(39, 144, 236, 0.65);
    --hw-focus-ring-accent: 2px solid rgba(0, 176, 235, 0.65);
    --hw-focus-ring-danger: 2px solid rgba(220, 38, 38, 0.5);
    --hw-focus-shadow: 0 0 0 3px rgba(0, 176, 235, 0.18);
    
    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --hw-transition-fast: 120ms ease;
    --hw-transition-base: 160ms ease;
    --hw-transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --hw-transition-slow: 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* =========================================================================
       LAYOUT (Shell Navigation)
       ========================================================================= */
    --hw-header-h: 72px;
    --hw-sideNav-expanded-w: 200px;
    --hw-sideNav-collapsed-w: 72px;
}