/* ===== CloudGuard Design Tokens（1:1 对齐 JwhooOpen light.css）===== */

:root {
  /* ---- 布局偏移 ---- */
  --app-nav-top-offset: 80px;
  --app-nav-viewport-height: calc(100vh - 80px);

  /* ---- Background & Surface（页面渐变 + 玻璃表面）---- */
  --theme-bg: #f7f8fa;
  --theme-bg-top: #fafbfc;
  --theme-bg-bottom: #f4f5f7;
  --theme-surface: rgba(255, 255, 255, 0.92);
  --theme-surface-strong: rgba(255, 255, 255, 0.96);
  --theme-surface-soft: rgba(255, 255, 255, 0.72);
  --theme-surface-softer: rgba(255, 255, 255, 0.58);
  --theme-surface-solid: #ffffff;
  --theme-surface-hover: rgba(255, 255, 255, 0.98);
  --theme-surface-highlight: rgba(217, 21, 45, 0.06);

  /* ---- Navigation Brand Gradient ---- */
  --theme-nav-start: #d9152d;
  --theme-nav-mid: #c41028;
  --theme-nav-end: #93091c;

  /* ---- Text ---- */
  --theme-text: #1a1a2e;
  --theme-text-soft: #5a5f6d;
  --theme-text-muted: rgba(90, 95, 109, 0.72);

  /* ---- Brand / Accent ---- */
  --theme-brand: #d9152d;
  --theme-brand-strong: #b20d22;
  --theme-brand-soft: #fef2f2;
  --theme-brand-softer: #fafafa;
  --theme-brand-light: rgba(217, 21, 45, 0.1);
  --theme-brand-hover: #e03048;
  --theme-brand-disabled: rgba(217, 21, 45, 0.4);
  --theme-accent: #ff6474;
  --theme-accent-light: rgba(255, 100, 116, 0.12);

  /* ---- Status ---- */
  --theme-success: #00a375;
  --theme-success-light: rgba(0, 163, 117, 0.12);
  --theme-warning: #f5a623;
  --theme-warning-light: rgba(245, 166, 35, 0.12);
  --theme-danger: #e53935;
  --theme-danger-light: rgba(229, 57, 53, 0.12);
  --theme-info: #2196f3;
  --theme-info-light: rgba(33, 150, 243, 0.12);

  /* ---- Borders & Shadows ---- */
  --theme-border: rgba(0, 0, 0, 0.08);
  --theme-border-strong: rgba(0, 0, 0, 0.15);
  --theme-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --theme-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
  --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --theme-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --theme-shadow-xl: 0 12px 56px rgba(0, 0, 0, 0.14);
  /* 品牌色投影（按钮、激活态用）*/
  --theme-shadow-brand: 0 12px 24px rgba(217, 21, 45, 0.14);
  --theme-shadow-brand-lg: 0 16px 32px rgba(217, 21, 45, 0.2);

  /* ---- Radius（对齐 JwhooOpen：sm=输入框 md=卡片 lg=面板）---- */
  --theme-radius-sm: 18px;
  --theme-radius-md: 24px;
  --theme-radius-lg: 32px;
  --theme-radius-xl: 40px;
  --theme-radius-round: 50%;
  --theme-radius-pill: 999px;

  /* ---- Sidebar ---- */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: rgba(255, 255, 255, 0.96);
  --sidebar-text: #5a5f6d;
  --sidebar-active: #d9152d;
  --sidebar-hover: rgba(217, 21, 45, 0.06);

  /* ---- Header ---- */
  --header-height: 80px;

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index layers ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-notification: 600;
  --z-tooltip: 700;
}

/* ===== 全局背景（多层径向 + 线性渐变，对齐 JwhooOpen）===== */
html,
body {
  background:
    radial-gradient(circle at left top, rgba(255, 255, 255, 0.8), transparent 24%),
    radial-gradient(circle at right top, rgba(240, 241, 243, 0.5), transparent 22%),
    linear-gradient(180deg, var(--theme-bg-top) 0%, var(--theme-bg) 44%, var(--theme-bg-bottom) 100%);
  background-attachment: fixed;
}

/* ===== Dark Theme（对齐 JwhooOpen dark.css：近黑底 + 青柠绿品牌）===== */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --theme-bg: #081018;
    --theme-bg-top: #0b141d;
    --theme-bg-bottom: #060c12;
    --theme-surface: rgba(20, 28, 38, 0.92);
    --theme-surface-strong: rgba(24, 33, 44, 0.96);
    --theme-surface-soft: rgba(20, 28, 38, 0.72);
    --theme-surface-softer: rgba(20, 28, 38, 0.58);
    --theme-surface-solid: #141c26;
    --theme-surface-hover: rgba(28, 38, 50, 0.98);
    --theme-surface-highlight: rgba(199, 255, 74, 0.06);

    --theme-nav-start: #1a242f;
    --theme-nav-mid: #141c26;
    --theme-nav-end: #0b141d;

    --theme-text: #f3f8ef;
    --theme-text-soft: #b8c4cc;
    --theme-text-muted: rgba(184, 196, 204, 0.72);

    --theme-brand: #c7ff4a;
    --theme-brand-strong: #a8e018;
    --theme-brand-soft: rgba(199, 255, 74, 0.08);
    --theme-brand-softer: rgba(199, 255, 74, 0.04);
    --theme-brand-light: rgba(199, 255, 74, 0.12);
    --theme-brand-hover: #d4ff66;
    --theme-brand-disabled: rgba(199, 255, 74, 0.4);
    --theme-accent: #ff8b3d;
    --theme-accent-light: rgba(255, 139, 61, 0.12);

    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-strong: rgba(255, 255, 255, 0.16);
    --theme-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --theme-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
    --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --theme-shadow-xl: 0 12px 56px rgba(0, 0, 0, 0.6);
    --theme-shadow-brand: 0 12px 24px rgba(199, 255, 74, 0.16);
    --theme-shadow-brand-lg: 0 16px 32px rgba(199, 255, 74, 0.22);

    --theme-radius-sm: 18px;
    --theme-radius-md: 22px;
    --theme-radius-lg: 28px;

    --sidebar-bg: rgba(20, 28, 38, 0.92);
    --sidebar-text: #b8c4cc;
    --sidebar-active: #c7ff4a;
    --sidebar-hover: rgba(199, 255, 74, 0.06);
  }
}

/* ===== Dark class override（手动切换，theme.js 加 html.dark）===== */
html.dark {
  --theme-bg: #081018;
  --theme-bg-top: #0b141d;
  --theme-bg-bottom: #060c12;
  --theme-surface: rgba(20, 28, 38, 0.92);
  --theme-surface-strong: rgba(24, 33, 44, 0.96);
  --theme-surface-soft: rgba(20, 28, 38, 0.72);
  --theme-surface-softer: rgba(20, 28, 38, 0.58);
  --theme-surface-solid: #141c26;
  --theme-surface-hover: rgba(28, 38, 50, 0.98);
  --theme-surface-highlight: rgba(199, 255, 74, 0.06);

  --theme-nav-start: #1a242f;
  --theme-nav-mid: #141c26;
  --theme-nav-end: #0b141d;

  --theme-text: #f3f8ef;
  --theme-text-soft: #b8c4cc;
  --theme-text-muted: rgba(184, 196, 204, 0.72);

  --theme-brand: #c7ff4a;
  --theme-brand-strong: #a8e018;
  --theme-brand-soft: rgba(199, 255, 74, 0.08);
  --theme-brand-softer: rgba(199, 255, 74, 0.04);
  --theme-brand-light: rgba(199, 255, 74, 0.12);
  --theme-brand-hover: #d4ff66;
  --theme-brand-disabled: rgba(199, 255, 74, 0.4);
  --theme-accent: #ff8b3d;
  --theme-accent-light: rgba(255, 139, 61, 0.12);

  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-strong: rgba(255, 255, 255, 0.16);
  --theme-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --theme-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
  --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --theme-shadow-xl: 0 12px 56px rgba(0, 0, 0, 0.6);
  --theme-shadow-brand: 0 12px 24px rgba(199, 255, 74, 0.16);
  --theme-shadow-brand-lg: 0 16px 32px rgba(199, 255, 74, 0.22);

  --theme-radius-sm: 18px;
  --theme-radius-md: 22px;
  --theme-radius-lg: 28px;

  --sidebar-bg: rgba(20, 28, 38, 0.92);
  --sidebar-text: #b8c4cc;
  --sidebar-active: #c7ff4a;
  --sidebar-hover: rgba(199, 255, 74, 0.06);
}

html.dark,
html.dark body {
  background:
    radial-gradient(circle at left top, rgba(40, 55, 72, 0.5), transparent 24%),
    radial-gradient(circle at right top, rgba(20, 32, 44, 0.6), transparent 22%),
    linear-gradient(180deg, var(--theme-bg-top) 0%, var(--theme-bg) 44%, var(--theme-bg-bottom) 100%);
  background-attachment: fixed;
}