/* ============================================================
   HealthFlow — Design Tokens (CSS Custom Properties)
   Naming convention: --hf-<category>-<variant>
   ============================================================ */

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root {
  /* ----------------------------------------------------------
     Color Palette — Primary (Blue)
  ---------------------------------------------------------- */
  --hf-color-primary-50:  #eff6ff;
  --hf-color-primary-100: #dbeafe;
  --hf-color-primary-200: #bfdbfe;
  --hf-color-primary-300: #93c5fd;
  --hf-color-primary-400: #60a5fa;
  --hf-color-primary-500: #3b82f6;
  --hf-color-primary-600: #2563eb;
  --hf-color-primary-700: #1d4ed8;
  --hf-color-primary-800: #1e40af;
  --hf-color-primary-900: #1e3a8a;
  --hf-color-primary:        #3b82f6;
  --hf-color-primary-hover:  #2563eb;
  --hf-color-primary-active: #1d4ed8;
  --hf-color-primary-muted:  rgba(59, 130, 246, 0.12);

  /* ----------------------------------------------------------
     Color Palette — Accent (Purple)
  ---------------------------------------------------------- */
  --hf-color-accent-50:  #f5f3ff;
  --hf-color-accent-100: #ede9fe;
  --hf-color-accent-200: #ddd6fe;
  --hf-color-accent-300: #c4b5fd;
  --hf-color-accent-400: #a78bfa;
  --hf-color-accent-500: #8b5cf6;
  --hf-color-accent-600: #7c3aed;
  --hf-color-accent-700: #6d28d9;
  --hf-color-accent-800: #5b21b6;
  --hf-color-accent-900: #4c1d95;
  --hf-color-accent:        #8b5cf6;
  --hf-color-accent-hover:  #7c3aed;
  --hf-color-accent-active: #6d28d9;
  --hf-color-accent-muted:  rgba(139, 92, 246, 0.12);

  /* ----------------------------------------------------------
     Color Palette — Success (Green)
  ---------------------------------------------------------- */
  --hf-color-success-50:  #ecfdf5;
  --hf-color-success-100: #d1fae5;
  --hf-color-success-200: #a7f3d0;
  --hf-color-success-300: #6ee7b7;
  --hf-color-success-400: #34d399;
  --hf-color-success-500: #10b981;
  --hf-color-success-600: #059669;
  --hf-color-success-700: #047857;
  --hf-color-success-800: #065f46;
  --hf-color-success-900: #064e3b;
  --hf-color-success:        #10b981;
  --hf-color-success-hover:  #059669;
  --hf-color-success-active: #047857;
  --hf-color-success-muted:  rgba(16, 185, 129, 0.12);

  /* ----------------------------------------------------------
     Color Palette — Warning (Amber)
  ---------------------------------------------------------- */
  --hf-color-warning-50:  #fffbeb;
  --hf-color-warning-100: #fef3c7;
  --hf-color-warning-200: #fde68a;
  --hf-color-warning-300: #fcd34d;
  --hf-color-warning-400: #fbbf24;
  --hf-color-warning-500: #f59e0b;
  --hf-color-warning-600: #d97706;
  --hf-color-warning-700: #b45309;
  --hf-color-warning-800: #92400e;
  --hf-color-warning-900: #78350f;
  --hf-color-warning:        #f59e0b;
  --hf-color-warning-hover:  #d97706;
  --hf-color-warning-active: #b45309;
  --hf-color-warning-muted:  rgba(245, 158, 11, 0.12);

  /* ----------------------------------------------------------
     Color Palette — Danger (Red)
  ---------------------------------------------------------- */
  --hf-color-danger-50:  #fef2f2;
  --hf-color-danger-100: #fee2e2;
  --hf-color-danger-200: #fecaca;
  --hf-color-danger-300: #fca5a5;
  --hf-color-danger-400: #f87171;
  --hf-color-danger-500: #ef4444;
  --hf-color-danger-600: #dc2626;
  --hf-color-danger-700: #b91c1c;
  --hf-color-danger-800: #991b1b;
  --hf-color-danger-900: #7f1d1d;
  --hf-color-danger:        #ef4444;
  --hf-color-danger-hover:  #dc2626;
  --hf-color-danger-active: #b91c1c;
  --hf-color-danger-muted:  rgba(239, 68, 68, 0.12);

  /* ----------------------------------------------------------
     Neutral / Gray Scale
  ---------------------------------------------------------- */
  --hf-color-neutral-0:   #ffffff;
  --hf-color-neutral-50:  #f8fafc;
  --hf-color-neutral-100: #f1f5f9;
  --hf-color-neutral-200: #e2e8f0;
  --hf-color-neutral-300: #cbd5e1;
  --hf-color-neutral-400: #94a3b8;
  --hf-color-neutral-500: #64748b;
  --hf-color-neutral-600: #475569;
  --hf-color-neutral-700: #334155;
  --hf-color-neutral-800: #1e293b;
  --hf-color-neutral-900: #0f172a;
  --hf-color-neutral-950: #020617;

  /* ----------------------------------------------------------
     Semantic Background Colors — Light
  ---------------------------------------------------------- */
  --hf-bg-page:            #f8fafc;
  --hf-bg-surface:         #ffffff;
  --hf-bg-surface-raised:  #ffffff;
  --hf-bg-surface-overlay: #ffffff;
  --hf-bg-subtle:          #f1f5f9;
  --hf-bg-muted:           #e2e8f0;
  --hf-bg-inverse:         #0f172a;

  /* Legacy layout compatibility aliases */
  --hf-color-bg: var(--hf-bg-page);
  --hf-color-text: var(--hf-text-primary);
  --hf-color-text-muted: var(--hf-text-secondary);
  --hf-color-border: var(--hf-border-default);
  --hf-color-border-strong: var(--hf-border-strong);
  --hf-color-surface: var(--hf-bg-surface);
  --hf-color-surface-overlay: var(--hf-bg-surface-overlay);
  --hf-color-sidebar-bg: var(--hf-sidebar-bg);
  --hf-color-sidebar-text: var(--hf-sidebar-text);
  --hf-color-sidebar-muted: var(--hf-sidebar-text);
  --hf-color-sidebar-text-active: var(--hf-sidebar-text-active);
  --hf-color-sidebar-bg-active: var(--hf-sidebar-bg-active);
  --hf-color-sidebar-bg-hover: var(--hf-sidebar-bg-hover);
  --hf-color-bg-rgb: 248, 250, 252;

  /* ----------------------------------------------------------
     Glassmorphism — Light
  ---------------------------------------------------------- */
  --hf-glass-bg:               rgba(255, 255, 255, 0.72);
  --hf-glass-bg-strong:        rgba(255, 255, 255, 0.88);
  --hf-glass-bg-subtle:        rgba(255, 255, 255, 0.48);
  --hf-glass-border:           rgba(255, 255, 255, 0.64);
  --hf-glass-border-subtle:    rgba(148, 163, 184, 0.28);
  --hf-glass-backdrop-blur:    blur(16px);
  --hf-glass-backdrop-blur-sm: blur(8px);
  --hf-glass-backdrop-blur-lg: blur(24px);
  --hf-glass-saturate:         saturate(180%);

  /* ----------------------------------------------------------
     Card Variables — Light
  ---------------------------------------------------------- */
  --hf-card-bg:           #ffffff;
  --hf-card-bg-hover:     #f8fafc;
  --hf-card-border:       #e2e8f0;
  --hf-card-border-hover: #cbd5e1;

  /* ----------------------------------------------------------
     Semantic Text Colors — Light
  ---------------------------------------------------------- */
  --hf-text-primary:    #0f172a;
  --hf-text-secondary:  #475569;
  --hf-text-tertiary:   #64748b;
  --hf-text-quaternary: #94a3b8;
  --hf-text-disabled:   #cbd5e1;
  --hf-text-inverse:    #ffffff;
  --hf-text-link:       #3b82f6;
  --hf-text-link-hover: #2563eb;
  --hf-text-on-primary: #ffffff;
  --hf-text-on-accent:  #ffffff;
  --hf-text-on-success: #ffffff;
  --hf-text-on-warning: #ffffff;
  --hf-text-on-danger:  #ffffff;

  /* ----------------------------------------------------------
     Border Colors — Light
  ---------------------------------------------------------- */
  --hf-border-default: #e2e8f0;
  --hf-border-strong:  #cbd5e1;
  --hf-border-subtle:  #f1f5f9;
  --hf-border-focus:   #3b82f6;
  --hf-border-inverse: #334155;

  /* ----------------------------------------------------------
     Shadows — Light
  ---------------------------------------------------------- */
  --hf-shadow-xs:    0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --hf-shadow-sm:    0 1px 3px 0 rgba(15, 23, 42, 0.10),
                     0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --hf-shadow-md:    0 4px 6px -1px rgba(15, 23, 42, 0.10),
                     0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --hf-shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.10),
                     0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --hf-shadow-xl:    0 20px 25px -5px rgba(15, 23, 42, 0.10),
                     0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --hf-shadow-2xl:   0 25px 50px -12px rgba(15, 23, 42, 0.25);
  --hf-shadow-3xl:   0 35px 60px -15px rgba(15, 23, 42, 0.30);
  --hf-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06);
  --hf-shadow-none:  0 0 #0000;

  --hf-shadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.35);
  --hf-shadow-accent:  0 4px 14px 0 rgba(139, 92, 246, 0.35);
  --hf-shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.35);
  --hf-shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.35);
  --hf-shadow-danger:  0 4px 14px 0 rgba(239, 68, 68, 0.35);

  --hf-shadow-card:       0 1px 3px 0 rgba(15, 23, 42, 0.08),
                          0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --hf-shadow-card-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.10),
                          0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --hf-shadow-modal:      0 25px 50px -12px rgba(15, 23, 42, 0.30);
  --hf-shadow-dropdown:   0 10px 15px -3px rgba(15, 23, 42, 0.12),
                          0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --hf-shadow-glass:      0 8px 32px 0 rgba(15, 23, 42, 0.08),
                          inset 0 1px 0 rgba(255, 255, 255, 0.60);

  /* ----------------------------------------------------------
     Border Radius
  ---------------------------------------------------------- */
  --hf-radius-none: 0;
  --hf-radius-xs:   0.125rem;  /*  2px */
  --hf-radius-sm:   0.25rem;   /*  4px */
  --hf-radius-md:   0.375rem;  /*  6px */
  --hf-radius-lg:   0.5rem;    /*  8px */
  --hf-radius-xl:   0.75rem;   /* 12px */
  --hf-radius-2xl:  1rem;      /* 16px */
  --hf-radius-3xl:  1.5rem;    /* 24px */
  --hf-radius-4xl:  2rem;      /* 32px */
  --hf-radius-full: 9999px;

  --hf-radius-card:    1rem;
  --hf-radius-btn:     0.5rem;
  --hf-radius-input:   0.5rem;
  --hf-radius-badge:   9999px;
  --hf-radius-tooltip: 0.375rem;
  --hf-radius-modal:   1.25rem;
  --hf-radius-chip:    9999px;

  /* ----------------------------------------------------------
     Transition Durations and Easings
  ---------------------------------------------------------- */
  --hf-duration-instant:  0ms;
  --hf-duration-fast:     100ms;
  --hf-duration-normal:   200ms;
  --hf-duration-moderate: 300ms;
  --hf-duration-slow:     500ms;
  --hf-duration-slower:   700ms;
  --hf-duration-slowest:  1000ms;

  --hf-ease-linear:  linear;
  --hf-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --hf-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --hf-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --hf-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --hf-ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --hf-ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --hf-transition-base:      all var(--hf-duration-normal)   var(--hf-ease-in-out);
  --hf-transition-fast:      all var(--hf-duration-fast)     var(--hf-ease-in-out);
  --hf-transition-moderate:  all var(--hf-duration-moderate) var(--hf-ease-in-out);
  --hf-transition-slow:      all var(--hf-duration-slow)     var(--hf-ease-in-out);
  --hf-transition-color:     color var(--hf-duration-normal) var(--hf-ease-in-out),
                             background-color var(--hf-duration-normal) var(--hf-ease-in-out),
                             border-color var(--hf-duration-normal) var(--hf-ease-in-out);
  --hf-transition-shadow:    box-shadow var(--hf-duration-normal) var(--hf-ease-in-out);
  --hf-transition-transform: transform var(--hf-duration-normal) var(--hf-ease-spring);
  --hf-transition-opacity:   opacity var(--hf-duration-normal) var(--hf-ease-in-out);

  /* ----------------------------------------------------------
     Typography — Font Families
  ---------------------------------------------------------- */
  --hf-font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system,
                     BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --hf-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                     'Courier New', Courier, monospace;
  --hf-font-display: 'Inter', var(--hf-font-sans);

  /* ----------------------------------------------------------
     Typography — Font Sizes
  ---------------------------------------------------------- */
  --hf-text-xs:   0.75rem;   /* 12px */
  --hf-text-sm:   0.875rem;  /* 14px */
  --hf-text-base: 1rem;      /* 16px */
  --hf-text-md:   1rem;      /* 16px */
  --hf-text-lg:   1.125rem;  /* 18px */
  --hf-text-xl:   1.25rem;   /* 20px */
  --hf-text-2xl:  1.5rem;    /* 24px */
  --hf-text-3xl:  1.875rem;  /* 30px */
  --hf-text-4xl:  2.25rem;   /* 36px */
  --hf-text-5xl:  3rem;      /* 48px */
  --hf-text-6xl:  3.75rem;   /* 60px */
  --hf-text-7xl:  4.5rem;    /* 72px */

  /* ----------------------------------------------------------
     Typography — Font Weights
  ---------------------------------------------------------- */
  --hf-font-thin:       100;
  --hf-font-extralight: 200;
  --hf-font-light:      300;
  --hf-font-normal:     400;
  --hf-font-medium:     500;
  --hf-font-semibold:   600;
  --hf-font-bold:       700;
  --hf-font-extrabold:  800;
  --hf-font-black:      900;

  /* ----------------------------------------------------------
     Typography — Line Heights
  ---------------------------------------------------------- */
  --hf-leading-none:    1;
  --hf-leading-tight:   1.25;
  --hf-leading-snug:    1.375;
  --hf-leading-normal:  1.5;
  --hf-leading-relaxed: 1.625;
  --hf-leading-loose:   2;

  /* ----------------------------------------------------------
     Typography — Letter Spacings
  ---------------------------------------------------------- */
  --hf-tracking-tighter: -0.05em;
  --hf-tracking-tight:   -0.025em;
  --hf-tracking-normal:  0em;
  --hf-tracking-wide:    0.025em;
  --hf-tracking-wider:   0.05em;
  --hf-tracking-widest:  0.1em;

  /* ----------------------------------------------------------
     Spacing Scale
  ---------------------------------------------------------- */
  --hf-space-px:  1px;
  --hf-space-0:   0;
  --hf-space-0-5: 0.125rem;  /*  2px */
  --hf-space-1:   0.25rem;   /*  4px */
  --hf-space-1-5: 0.375rem;  /*  6px */
  --hf-space-2:   0.5rem;    /*  8px */
  --hf-space-2-5: 0.625rem;  /* 10px */
  --hf-space-3:   0.75rem;   /* 12px */
  --hf-space-3-5: 0.875rem;  /* 14px */
  --hf-space-4:   1rem;      /* 16px */
  --hf-space-5:   1.25rem;   /* 20px */
  --hf-space-6:   1.5rem;    /* 24px */
  --hf-space-7:   1.75rem;   /* 28px */
  --hf-space-8:   2rem;      /* 32px */
  --hf-space-9:   2.25rem;   /* 36px */
  --hf-space-10:  2.5rem;    /* 40px */
  --hf-space-11:  2.75rem;   /* 44px */
  --hf-space-12:  3rem;      /* 48px */
  --hf-space-14:  3.5rem;    /* 56px */
  --hf-space-16:  4rem;      /* 64px */
  --hf-space-20:  5rem;      /* 80px */
  --hf-space-24:  6rem;      /* 96px */
  --hf-space-28:  7rem;      /* 112px */
  --hf-space-32:  8rem;      /* 128px */
  --hf-space-36:  9rem;      /* 144px */
  --hf-space-40:  10rem;     /* 160px */
  --hf-space-48:  12rem;     /* 192px */
  --hf-space-56:  14rem;     /* 224px */
  --hf-space-64:  16rem;     /* 256px */

  --hf-space-section:   var(--hf-space-16);
  --hf-space-container: var(--hf-space-8);
  --hf-space-card:      var(--hf-space-6);
  --hf-space-card-sm:   var(--hf-space-4);
  --hf-space-input:     var(--hf-space-3) var(--hf-space-4);
  --hf-space-btn:       var(--hf-space-2-5) var(--hf-space-5);
  --hf-space-btn-sm:    var(--hf-space-1-5) var(--hf-space-3);
  --hf-space-btn-lg:    var(--hf-space-3-5) var(--hf-space-7);

  /* ----------------------------------------------------------
     Chart Color Palette
  ---------------------------------------------------------- */
  --hf-chart-1:  #3b82f6;
  --hf-chart-2:  #8b5cf6;
  --hf-chart-3:  #10b981;
  --hf-chart-4:  #f59e0b;
  --hf-chart-5:  #ef4444;
  --hf-chart-6:  #06b6d4;
  --hf-chart-7:  #ec4899;
  --hf-chart-8:  #84cc16;
  --hf-chart-9:  #f97316;
  --hf-chart-10: #6366f1;
  --hf-chart-11: #14b8a6;
  --hf-chart-12: #a855f7;

  --hf-chart-grid:           #e2e8f0;
  --hf-chart-axis:           #94a3b8;
  --hf-chart-axis-label:     #64748b;
  --hf-chart-tooltip-bg:     #ffffff;
  --hf-chart-tooltip-border: #e2e8f0;
  --hf-chart-legend-text:    #475569;
  --hf-chart-crosshair:      rgba(59, 130, 246, 0.20);

  --hf-chart-positive: #10b981;
  --hf-chart-negative: #ef4444;
  --hf-chart-neutral:  #64748b;

  --hf-chart-gradient-primary-start: rgba(59, 130, 246, 0.30);
  --hf-chart-gradient-primary-end:   rgba(59, 130, 246, 0.00);
  --hf-chart-gradient-accent-start:  rgba(139, 92, 246, 0.30);
  --hf-chart-gradient-accent-end:    rgba(139, 92, 246, 0.00);
  --hf-chart-gradient-success-start: rgba(16, 185, 129, 0.30);
  --hf-chart-gradient-success-end:   rgba(16, 185, 129, 0.00);

  /* ----------------------------------------------------------
     Sidebar Variables
  ---------------------------------------------------------- */
  --hf-sidebar-width:           16rem;   /* 256px — expanded  */
  --hf-sidebar-width-collapsed: 4.5rem;  /*  72px — icon-only */
  --hf-sidebar-width-mini:      3rem;    /*  48px — rail      */
  --hf-sidebar-width-mobile:    100vw;

  --hf-sidebar-bg:          #ffffff;
  --hf-sidebar-border:      #e2e8f0;
  --hf-sidebar-text:        #475569;
  --hf-sidebar-text-active: #3b82f6;
  --hf-sidebar-bg-active:   rgba(59, 130, 246, 0.08);
  --hf-sidebar-bg-hover:    rgba(15, 23, 42, 0.04);
  --hf-sidebar-icon-size:   1.25rem;    /* 20px */
  --hf-sidebar-transition:  width var(--hf-duration-moderate) var(--hf-ease-in-out);

  --hf-topbar-height:  3.75rem;         /* 60px */
  --hf-topbar-bg:      rgba(255, 255, 255, 0.85);
  --hf-topbar-border:  #e2e8f0;

  --hf-content-max-width: 1400px;
  --hf-content-padding:   var(--hf-space-6);

  /* ----------------------------------------------------------
     Z-Index Layers
  ---------------------------------------------------------- */
  --hf-z-deep:     -9999;
  --hf-z-below:    -1;
  --hf-z-base:     0;
  --hf-z-raised:   1;
  --hf-z-dropdown: 1000;
  --hf-z-sticky:   1100;
  --hf-z-banner:   1200;
  --hf-z-overlay:  1300;
  --hf-z-modal:    1400;
  --hf-z-popover:  1500;
  --hf-z-skiplink: 1600;
  --hf-z-toast:    1700;
  --hf-z-tooltip:  1800;
  --hf-z-spinner:  1900;
  --hf-z-top:      9999;

  /* ----------------------------------------------------------
     Focus Ring
  ---------------------------------------------------------- */
  --hf-focus-ring-width:  3px;
  --hf-focus-ring-offset: 2px;
  --hf-focus-ring-color:  rgba(59, 130, 246, 0.50);
  --hf-focus-ring:        0 0 0 var(--hf-focus-ring-width) var(--hf-focus-ring-color);

  /* ----------------------------------------------------------
     Scrollbar
  ---------------------------------------------------------- */
  --hf-scrollbar-width:       6px;
  --hf-scrollbar-track:       #f1f5f9;
  --hf-scrollbar-thumb:       #cbd5e1;
  --hf-scrollbar-thumb-hover: #94a3b8;

  /* ----------------------------------------------------------
     Form / Input
  ---------------------------------------------------------- */
  --hf-input-bg:            #ffffff;
  --hf-input-border:        #e2e8f0;
  --hf-input-border-hover:  #94a3b8;
  --hf-input-border-focus:  #3b82f6;
  --hf-input-text:          #0f172a;
  --hf-input-placeholder:   #94a3b8;
  --hf-input-disabled-bg:   #f1f5f9;
  --hf-input-disabled-text: #cbd5e1;
  --hf-input-height:        2.5rem;  /* 40px */
  --hf-input-height-sm:     2rem;    /* 32px */
  --hf-input-height-lg:     3rem;    /* 48px */

  /* ----------------------------------------------------------
     Overlay / Backdrop
  ---------------------------------------------------------- */
  --hf-overlay-bg:   rgba(15, 23, 42, 0.50);
  --hf-overlay-blur: blur(4px);
}


/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  /* ----------------------------------------------------------
     Semantic Background Colors — Dark
  ---------------------------------------------------------- */
  --hf-bg-page:            #0f172a;
  --hf-bg-surface:         #1e293b;
  --hf-bg-surface-raised:  #334155;
  --hf-bg-surface-overlay: #1e293b;
  --hf-bg-subtle:          #1e293b;
  --hf-bg-muted:           #334155;
  --hf-bg-inverse:         #f8fafc;

  /* Legacy layout compatibility aliases */
  --hf-color-bg: var(--hf-bg-page);
  --hf-color-text: var(--hf-text-primary);
  --hf-color-text-muted: var(--hf-text-secondary);
  --hf-color-border: var(--hf-border-default);
  --hf-color-border-strong: var(--hf-border-strong);
  --hf-color-surface: var(--hf-bg-surface);
  --hf-color-surface-overlay: var(--hf-bg-surface-overlay);
  --hf-color-sidebar-bg: var(--hf-sidebar-bg);
  --hf-color-sidebar-text: var(--hf-sidebar-text);
  --hf-color-sidebar-muted: var(--hf-sidebar-text);
  --hf-color-sidebar-text-active: var(--hf-sidebar-text-active);
  --hf-color-sidebar-bg-active: var(--hf-sidebar-bg-active);
  --hf-color-sidebar-bg-hover: var(--hf-sidebar-bg-hover);
  --hf-color-bg-rgb: 30, 41, 59;

  /* ----------------------------------------------------------
     Glassmorphism — Dark
  ---------------------------------------------------------- */
  --hf-glass-bg:            rgba(30, 41, 59, 0.72);
  --hf-glass-bg-strong:     rgba(30, 41, 59, 0.90);
  --hf-glass-bg-subtle:     rgba(30, 41, 59, 0.48);
  --hf-glass-border:        rgba(255, 255, 255, 0.08);
  --hf-glass-border-subtle: rgba(255, 255, 255, 0.04);

  /* ----------------------------------------------------------
     Card Variables — Dark
  ---------------------------------------------------------- */
  --hf-card-bg:           #1e293b;
  --hf-card-bg-hover:     #334155;
  --hf-card-border:       #334155;
  --hf-card-border-hover: #475569;

  /* ----------------------------------------------------------
     Semantic Text Colors — Dark
  ---------------------------------------------------------- */
  --hf-text-primary:    #f1f5f9;
  --hf-text-secondary:  #94a3b8;
  --hf-text-tertiary:   #64748b;
  --hf-text-quaternary: #475569;
  --hf-text-disabled:   #334155;
  --hf-text-inverse:    #0f172a;
  --hf-text-link:       #60a5fa;
  --hf-text-link-hover: #93c5fd;

  /* ----------------------------------------------------------
     Border Colors — Dark
  ---------------------------------------------------------- */
  --hf-border-default: #334155;
  --hf-border-strong:  #475569;
  --hf-border-subtle:  #1e293b;
  --hf-border-focus:   #3b82f6;
  --hf-border-inverse: #e2e8f0;

  /* ----------------------------------------------------------
     Shadows — Dark
  ---------------------------------------------------------- */
  --hf-shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --hf-shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.40),
                     0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --hf-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.40),
                     0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --hf-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.50),
                     0 4px 6px -4px rgba(0, 0, 0, 0.30);
  --hf-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.55),
                     0 8px 10px -6px rgba(0, 0, 0, 0.35);
  --hf-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.65);
  --hf-shadow-3xl:   0 35px 60px -15px rgba(0, 0, 0, 0.70);
  --hf-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.30);

  --hf-shadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.50);
  --hf-shadow-accent:  0 4px 14px 0 rgba(139, 92, 246, 0.50);
  --hf-shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.50);
  --hf-shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.50);
  --hf-shadow-danger:  0 4px 14px 0 rgba(239, 68, 68, 0.50);

  --hf-shadow-card:       0 1px 3px 0 rgba(0, 0, 0, 0.30),
                          0 1px 2px -1px rgba(0, 0, 0, 0.20);
  --hf-shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.45),
                          0 4px 6px -4px rgba(0, 0, 0, 0.30);
  --hf-shadow-modal:      0 25px 50px -12px rgba(0, 0, 0, 0.70);
  --hf-shadow-dropdown:   0 10px 15px -3px rgba(0, 0, 0, 0.50),
                          0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --hf-shadow-glass:      0 8px 32px 0 rgba(0, 0, 0, 0.40),
                          inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ----------------------------------------------------------
     Chart Colors — Dark overrides
  ---------------------------------------------------------- */
  --hf-chart-grid:           #334155;
  --hf-chart-axis:           #475569;
  --hf-chart-axis-label:     #64748b;
  --hf-chart-tooltip-bg:     #1e293b;
  --hf-chart-tooltip-border: #334155;
  --hf-chart-legend-text:    #94a3b8;
  --hf-chart-crosshair:      rgba(96, 165, 250, 0.20);

  --hf-chart-gradient-primary-start: rgba(59, 130, 246, 0.40);
  --hf-chart-gradient-primary-end:   rgba(59, 130, 246, 0.00);
  --hf-chart-gradient-accent-start:  rgba(139, 92, 246, 0.40);
  --hf-chart-gradient-accent-end:    rgba(139, 92, 246, 0.00);
  --hf-chart-gradient-success-start: rgba(16, 185, 129, 0.40);
  --hf-chart-gradient-success-end:   rgba(16, 185, 129, 0.00);

  /* ----------------------------------------------------------
     Sidebar — Dark
  ---------------------------------------------------------- */
  --hf-sidebar-bg:          #1e293b;
  --hf-sidebar-border:      #334155;
  --hf-sidebar-text:        #94a3b8;
  --hf-sidebar-text-active: #60a5fa;
  --hf-sidebar-bg-active:   rgba(96, 165, 250, 0.10);
  --hf-sidebar-bg-hover:    rgba(255, 255, 255, 0.05);

  /* Legacy layout color aliases */
  --hf-color-bg: var(--hf-bg-page);
  --hf-color-text: var(--hf-text-primary);
  --hf-color-text-muted: var(--hf-text-secondary);
  --hf-color-border: var(--hf-border-default);
  --hf-color-border-strong: var(--hf-border-strong);
  --hf-color-surface: var(--hf-bg-surface);
  --hf-color-surface-overlay: var(--hf-bg-surface-overlay);
  --hf-color-sidebar-bg: var(--hf-sidebar-bg);
  --hf-color-sidebar-text: var(--hf-sidebar-text);
  --hf-color-sidebar-muted: var(--hf-sidebar-text);
  --hf-color-sidebar-text-active: var(--hf-sidebar-text-active);
  --hf-color-sidebar-bg-active: var(--hf-sidebar-bg-active);
  --hf-color-sidebar-bg-hover: var(--hf-sidebar-bg-hover);
  --hf-color-bg-rgb: 15, 23, 42;

  /* ----------------------------------------------------------
     Focus Ring — Dark
  ---------------------------------------------------------- */
  --hf-focus-ring-color: rgba(96, 165, 250, 0.55);

  /* ----------------------------------------------------------
     Scrollbar — Dark
  ---------------------------------------------------------- */
  --hf-scrollbar-track:       #1e293b;
  --hf-scrollbar-thumb:       #334155;
  --hf-scrollbar-thumb-hover: #475569;

  /* ----------------------------------------------------------
     Form / Input — Dark
  ---------------------------------------------------------- */
  --hf-input-bg:            #1e293b;
  --hf-input-border:        #334155;
  --hf-input-border-hover:  #475569;
  --hf-input-border-focus:  #3b82f6;
  --hf-input-text:          #f1f5f9;
  --hf-input-placeholder:   #475569;
  --hf-input-disabled-bg:   #0f172a;
  --hf-input-disabled-text: #334155;

  /* ----------------------------------------------------------
     Overlay / Backdrop — Dark
  ---------------------------------------------------------- */
  --hf-overlay-bg: rgba(2, 6, 23, 0.70);

  /* ----------------------------------------------------------
     Color muted variants — slightly more visible in dark mode
  ---------------------------------------------------------- */
  --hf-color-primary-muted: rgba(59, 130, 246, 0.18);
  --hf-color-accent-muted:  rgba(139, 92, 246, 0.18);
  --hf-color-success-muted: rgba(16, 185, 129, 0.18);
  --hf-color-warning-muted: rgba(245, 158, 11, 0.18);
  --hf-color-danger-muted:  rgba(239, 68, 68, 0.18);
}