:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --qf-bg: #0b1120;
  --qf-bg-elevated: #111a2e;
  --qf-surface: #172238;
  --qf-surface-hover: #21304a;
  --qf-text: #f8fafc;
  --qf-text-muted: #a8b3c3;
  --qf-text-inverse: #ffffff;
  --qf-primary: #6C8FFF;          
  --qf-primary-hover: #9FB5FF;    
  --qf-accent: #4FD8FF;            
  --qf-border: #334155;
  --qf-border-strong: #64748b;
  --qf-success: #10b981;
  --qf-warning: #f59e0b;
  --qf-danger: #ef4444;
  --qf-info: #6C8FFF;             
  --qf-radius-sm: 8px;
  --qf-radius-md: 12px;
  --qf-radius-lg: 16px;
  --qf-space-1: 4px;
  --qf-space-2: 8px;
  --qf-space-3: 12px;
  --qf-space-4: 16px;
  --qf-space-5: 20px;
  --qf-space-6: 24px;
  --qf-space-7: 28px;
  --qf-space-8: 32px;
  --qf-shadow-sm: 0 1px 2px rgba(2, 6, 23, .32);
  --qf-shadow-md: 0 12px 32px -12px rgba(2, 6, 23, .62);
  --qf-shadow-lg: 0 28px 72px -24px rgba(2, 6, 23, .82);
  --qf-duration-fast: 120ms;
  --qf-duration-base: 200ms;
  --qf-duration-slow: 320ms;
  --qf-font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --qf-sidebar-width: 264px;

  
  --bg: var(--qf-bg);
  --bg-secondary: var(--qf-bg-elevated);
  --bg-tertiary: var(--qf-surface);
  --bg-hover: var(--qf-surface-hover);
  --text: var(--qf-text);
  --text-secondary: var(--qf-text-muted);
  --text-muted: var(--qf-text-muted);
  --text-on-color: var(--qf-text-inverse);
  --primary: var(--qf-primary);
  --primary-hover: var(--qf-primary-hover);
  --primary-light: color-mix(in srgb, var(--qf-primary) 18%, transparent);
  --accent: var(--qf-accent);
  --border: var(--qf-border);
  --border-light: color-mix(in srgb, var(--qf-border) 72%, transparent);
  --border-strong: var(--qf-border-strong);
  --success: var(--qf-success);
  --warning: var(--qf-warning);
  --error: var(--qf-danger);
  --info: var(--qf-info);
  --radius-sm: var(--qf-radius-sm);
  --radius: var(--qf-radius-md);
  --r-ctl: var(--qf-radius-sm);
  --r-md: var(--qf-radius-md);
  --r-card: var(--qf-radius-lg);
  --r-pill: 999px;
  --sidebar-width: var(--qf-sidebar-width);
  --shadow-1: var(--qf-shadow-sm);
  --shadow-2: var(--qf-shadow-md);
  --shadow-3: var(--qf-shadow-lg);
  --row-hover: color-mix(in srgb, var(--qf-primary) 8%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--qf-primary) 26%, transparent);
  --dur: var(--qf-duration-fast);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme="light"],
body.light-theme {
  color-scheme: light;
  --qf-bg: #f6f8fc;
  --qf-bg-elevated: #ffffff;
  --qf-surface: #ffffff;
  --qf-surface-hover: #eef3f8;
  --qf-text: #0f172a;
  --qf-text-muted: #526174;
  --qf-text-inverse: #ffffff;
  --qf-primary: #2B5CFF;          
  --qf-primary-hover: #1E50E8;    
  --qf-accent: #00C2FF;            
  --qf-border: #d7dee8;
  --qf-border-strong: #94a3b8;
  --qf-success: #047857;
  --qf-warning: #b45309;
  --qf-danger: #dc2626;
  --qf-info: #2B5CFF;              
  --qf-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
  --qf-shadow-md: 0 14px 34px -16px rgba(15, 23, 42, .24);
  --qf-shadow-lg: 0 30px 70px -28px rgba(15, 23, 42, .34);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --qf-bg: #f6f8fc;
    --qf-bg-elevated: #ffffff;
    --qf-surface: #ffffff;
    --qf-surface-hover: #eef3f8;
    --qf-text: #0f172a;
    --qf-text-muted: #526174;
    --qf-primary: #2B5CFF;        
    --qf-primary-hover: #1E50E8;  
    --qf-accent: #00C2FF;            
    --qf-border: #d7dee8;
    --qf-border-strong: #94a3b8;
  }
}


:root {
  --qf-surface-sunken: #f2f4f9;
  --qf-primary-soft: #eef0ff;
  --qf-success-soft: #e7f6ef;
  --qf-warning-soft: #fdf3e3;
  --qf-danger-soft: #fdeceb;
  --qf-info-soft: #e9effd;
  --qf-scrollbar-thumb: #cbd3e1;
  --qf-scrollbar-thumb-hover: #a9b4c9;
}

:root[data-theme="dark"] {
  --qf-surface-sunken: #0d1322;
  --qf-primary-soft: rgba(108, 143, 255, .16);   
  --qf-success-soft: rgba(52, 211, 153, .14);
  --qf-warning-soft: rgba(251, 191, 36, .14);
  --qf-danger-soft: rgba(248, 113, 113, .14);
  --qf-info-soft: rgba(108, 143, 255, .14);   
  --qf-scrollbar-thumb: #33405c;
  --qf-scrollbar-thumb-hover: #4a5a7d;
}




:root {
  
  --qf-primary-ring: color-mix(in srgb, var(--qf-primary) 35%, transparent);  
  --qf-primary-border: color-mix(in srgb, var(--qf-primary) 42%, transparent);
  --qf-on-primary: #ffffff;

  
  --qf-success-border: color-mix(in srgb, var(--qf-success) 38%, transparent);
  --qf-warning-border: color-mix(in srgb, var(--qf-warning) 38%, transparent);
  --qf-danger-border: color-mix(in srgb, var(--qf-danger) 38%, transparent);
  --qf-info-border: color-mix(in srgb, var(--qf-info) 38%, transparent);

  
  --qf-on-success: #ffffff;
  --qf-on-warning: #ffffff;
  --qf-on-danger: #ffffff;
  --qf-on-info: #ffffff;

  
  --qf-success-faint: color-mix(in srgb, var(--qf-success) 7%, transparent);
  --qf-warning-faint: color-mix(in srgb, var(--qf-warning) 7%, transparent);
  --qf-danger-faint: color-mix(in srgb, var(--qf-danger) 7%, transparent);
  --qf-info-faint: color-mix(in srgb, var(--qf-info) 7%, transparent);
}


:root {
  --qf-z-base: 0;
  --qf-z-raised: 10;
  --qf-z-sticky: 100;
  --qf-z-header: 200;
  --qf-z-dropdown: 400;
  --qf-z-overlay: 800;
  --qf-z-modal: 900;
  --qf-z-toast: 1000;
  --qf-z-tooltip: 1100;
}


:root {
  --qf-font-size-xs: 11px;
  --qf-font-size-sm: 12px;
  --qf-font-size-md: 13px;
  --qf-font-size-base: 14px;
  --qf-font-size-lg: 16px;
  --qf-font-size-xl: 20px;
  --qf-font-size-2xl: 24px;
  --qf-font-size-3xl: 30px;
  --qf-line-height-tight: 1.3;
  --qf-line-height-snug: 1.5;
  --qf-line-height-base: 1.6;
  --qf-line-height-loose: 1.8;
  --qf-font-weight-normal: 400;
  --qf-font-weight-medium: 500;
  --qf-font-weight-semibold: 600;
  --qf-font-weight-bold: 700;
  --qf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


:root {
  --qf-bp-sm: 640px;
  --qf-bp-md: 768px;
  --qf-bp-lg: 1024px;
  --qf-bp-xl: 1280px;
  
  --qf-touch-target: 44px;
}


:root {
  --qf-layout-header-height: 56px;
  --qf-layout-content-max: 1680px;
  --qf-layout-content-pad: var(--qf-space-5);
  --qf-layout-card-pad: var(--qf-space-4);
  --qf-layout-row-height: 40px;
}


:root {
  --qf-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --qf-ease-out: cubic-bezier(0, 0, .2, 1);
  --qf-skeleton-base: color-mix(in srgb, var(--qf-text-muted) 14%, transparent);
  --qf-skeleton-highlight: color-mix(in srgb, var(--qf-surface) 55%, transparent);
}


:root {
  --qf-focus-ring: 0 0 0 3px var(--qf-primary-ring);
  --qf-focus-outline: 2px solid var(--qf-primary);
  --qf-focus-offset: 2px;
}


:root[data-theme="dark"] {
  
  --qf-on-primary: #ffffff;
  --qf-primary-border: color-mix(in srgb, var(--qf-primary) 52%, transparent);
  --qf-primary-ring: color-mix(in srgb, var(--qf-primary) 42%, transparent);  
  --qf-focus-ring: 0 0 0 3px var(--qf-primary-ring);
}

:root[data-theme="dark"] {
  --qf-primary-soft: rgba(108, 143, 255, .20);   
}