:root {
  --radius-large: 1rem;
  --content-delay: 150ms;

  /* Theme Variables */
  --hue: 250; /* Default Hue */
  
  --primary: oklch(0.70 0.14 var(--hue));
  --page-bg: oklch(0.95 0.01 var(--hue));
  --card-bg: white;
  --card-bg-transparent: rgba(255, 255, 255, 0.6);
  
  --btn-content: oklch(0.55 0.12 var(--hue));
  --btn-regular-bg: oklch(0.95 0.025 var(--hue));
  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue));
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue));
  
  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue));
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue));
  
  --btn-card-bg-hover: oklch(0.98 0.005 var(--hue));
  --btn-card-bg-active: oklch(0.9 0.03 var(--hue));
  
  --enter-btn-bg: var(--btn-regular-bg);
  --enter-btn-bg-hover: var(--btn-regular-bg-hover);
  --enter-btn-bg-active: var(--btn-regular-bg-active);
  
  --deep-text: oklch(0.25 0.02 var(--hue));
  --title-active: oklch(0.6 0.1 var(--hue));
  
  --line-divider: rgba(0, 0, 0, 0.08);
  --line-color: rgba(0, 0, 0, 0.1);
  --meta-divider: rgba(0, 0, 0, 0.2);
  --content-meta: rgba(0, 0, 0, 0.7);
  
  --inline-code-bg: var(--btn-regular-bg);
  --inline-code-color: var(--btn-content);
  --selection-bg: oklch(0.90 0.05 var(--hue));
  --codeblock-bg: oklch(0.17 0.015 var(--hue));
  --codeblock-topbar-bg: oklch(0.3 0.02 var(--hue));
  
  --license-block-bg: rgba(0, 0, 0, 0.03);
  
  --link-underline: oklch(0.93 0.04 var(--hue));
  --link-hover: oklch(0.95 0.025 var(--hue));
  --link-active: oklch(0.90 0.05 var(--hue));
  
  --float-panel-bg: white;
  
  --color-selection-bar: linear-gradient(to right, 
        oklch(0.80 0.10 0),
        oklch(0.80 0.10 30),
        oklch(0.80 0.10 60),
        oklch(0.80 0.10 90),
        oklch(0.80 0.10 120),
        oklch(0.80 0.10 150),
        oklch(0.80 0.10 180),
        oklch(0.80 0.10 210),
        oklch(0.80 0.10 240),
        oklch(0.80 0.10 270),
        oklch(0.80 0.10 300),
        oklch(0.80 0.10 330),
        oklch(0.80 0.10 360)
  );

  /* Scrollbar */
  --scrollbar-bg-light: rgba(0, 0, 0, 0.4);
  --scrollbar-bg-hover-light: rgba(0, 0, 0, 0.5);
  --scrollbar-bg-active-light: rgba(0, 0, 0, 0.6);
  
  --scrollbar-bg-dark: rgba(255, 255, 255, 0.4);
  --scrollbar-bg-hover-dark: rgba(255, 255, 255, 0.5);
  --scrollbar-bg-active-dark: rgba(255, 255, 255, 0.6);
  
  --scrollbar-bg: var(--scrollbar-bg-light);
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light);
  --scrollbar-bg-active: var(--scrollbar-bg-active-light);

  /* TOC相关变量 */
  --toc-badge-bg: oklch(0.9 0.045 var(--hue));
  --toc-btn-hover: oklch(0.92 0.015 var(--hue));
  --toc-btn-active: oklch(0.90 0.015 var(--hue));
  --toc-width: calc((100vw - var(--page-width, 90rem)) / 2 - 1rem);
  --toc-item-active: oklch(0.70 0.13 var(--hue));

  /* Admonitions Colors */
  --admonitions-color-tip: oklch(0.7 0.14 180);
  --admonitions-color-note: oklch(0.7 0.14 250);
  --admonitions-color-important: oklch(0.7 0.14 310);
  --admonitions-color-warning: oklch(0.7 0.14 60);
  --admonitions-color-caution: oklch(0.6 0.2 25);
  
  --navbar-glass-blur: 20px;
  --opacity-55: 0.55;
  --shadow-navbar: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* ===== 响应式断点变量 ===== */
  /* 断点定义 */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* 容器宽度 */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ===== 动画变量 ===== */
  /* 缓动函数 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  
  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;
  
  /* 动画延迟 */
  --delay-none: 0ms;
  --delay-short: 50ms;
  --delay-medium: 100ms;
  --delay-long: 150ms;
  --delay-longer: 200ms;

  /* ===== 间距变量 ===== */
  /* 基础间距 */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-lg: 1rem;       /* 16px */
  --spacing-xl: 1.25rem;    /* 20px */
  --spacing-2xl: 1.5rem;    /* 24px */
  --spacing-3xl: 2rem;      /* 32px */
  --spacing-4xl: 2.5rem;    /* 40px */
  --spacing-5xl: 3rem;      /* 48px */
  
  /* 组件间距 */
  --widget-gap-mobile: var(--spacing-md);
  --widget-gap-tablet: var(--spacing-lg);
  --widget-gap-desktop: var(--spacing-xl);
  
  /* 侧边栏宽度 */
  --sidebar-width-mobile: 100%;
  --sidebar-width-tablet: 280px;
  --sidebar-width-desktop: 320px;

  /* ===== 阴影变量 ===== */
  /* 基础阴影 */
  --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);
  
  /* 特殊阴影 */
  --shadow-navbar-dark: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-button-dark: 0 4px 12px rgba(255, 255, 255, 0.1);

  /* ===== 边框半径变量 ===== */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ===== 透明度变量 ===== */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  /* --opacity-55 is already defined above */
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* ===== 模糊效果变量 ===== */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 16px;
  --blur-2xl: 20px;
  --blur-3xl: 24px;

  /* ===== 变换变量 ===== */
  /* 平移 */
  --translate-xs: 0.125rem;   /* 2px */
  --translate-sm: 0.25rem;     /* 4px */
  --translate-md: 0.5rem;      /* 8px */
  --translate-lg: 0.75rem;     /* 12px */
  --translate-xl: 1rem;        /* 16px */
  --translate-2xl: 1.5rem;      /* 24px */
  --translate-3xl: 2rem;       /* 32px */
  
  /* 缩放 */
  --scale-95: 0.95;
  --scale-98: 0.98;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;

  /* ===== 层级变量 ===== */
  --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;
  --z-navbar: 20;
  --z-banner: 10;
  --z-content: 30;

  /* ===== 性能优化变量 ===== */
  /* GPU加速 */
  --gpu-transform: translateZ(0);
  --gpu-backface: hidden;
  
  /* 动画性能 */
  --animation-fill-mode: both;
  --animation-timing: var(--ease-standard);
  --animation-duration: var(--duration-medium);
}

/* ===== 响应式工具类 ===== */
@media (max-width: 767px) {
  :root {
    --container-width: var(--container-sm);
    --widget-gap: var(--widget-gap-mobile);
    --sidebar-width: var(--sidebar-width-mobile);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --container-width: var(--container-md);
    --widget-gap: var(--widget-gap-tablet);
    --sidebar-width: var(--sidebar-width-tablet);
  }
}

@media (min-width: 1280px) {
  :root {
    --container-width: var(--container-lg);
    --widget-gap: var(--widget-gap-desktop);
    --sidebar-width: var(--sidebar-width-desktop);
  }
}

/* 暗色主题变量 */
:root.dark {
  --primary: oklch(0.75 0.14 var(--hue));
  --page-bg: oklch(0.16 0.014 var(--hue));
  --card-bg: oklch(0.23 0.015 var(--hue));
  --card-bg-transparent: rgba(23, 23, 23, 0.6);
  
  --btn-content: oklch(0.75 0.1 var(--hue));
  --btn-regular-bg: oklch(0.33 0.035 var(--hue));
  --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue));
  --btn-regular-bg-active: oklch(0.43 0.045 var(--hue));
  
  --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue));
  --btn-plain-bg-active: oklch(0.27 0.025 var(--hue));
  
  --btn-card-bg-hover: oklch(0.3 0.03 var(--hue));
  --btn-card-bg-active: oklch(0.35 0.035 var(--hue));
  
  --line-divider: rgba(255, 255, 255, 0.08);
  --line-color: rgba(255, 255, 255, 0.1);
  --meta-divider: rgba(255, 255, 255, 0.2);
  --content-meta: rgba(255, 255, 255, 0.6);
  
  --codeblock-bg: oklch(0.20 0.015 var(--hue));
  --codeblock-topbar-bg: oklch(0.25 0.02 var(--hue));
  
  --license-block-bg: rgba(255, 255, 255, 0.03);
  
  --float-panel-bg: oklch(0.20 0.015 var(--hue));
  
  --scrollbar-bg: var(--scrollbar-bg-dark);
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-dark);
  --scrollbar-bg-active: var(--scrollbar-bg-active-dark);
  
  --shadow-navbar: var(--shadow-navbar-dark);
  --shadow-button: var(--shadow-button-dark);
  
  --display-light-icon: 0;
  --display-dark-icon: 1;
}

body {
    background-color: var(--page-bg);
    color: var(--deep-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* WP Specific */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}