/**
 * 设计令牌系统（Design Tokens）
 * ------------------------------------------------------------------
 * 这是全站设计变量的单一来源（Single Source of Truth）。
 * 所有模板通过覆盖令牌来换肤，而不是重写组件 CSS。
 *
 * 层级：
 *   1. :root         — 默认浅色令牌（基础值）
 *   2. .dark         — 深色模式覆盖
 *   3. 模板 theme.css — 各模板在 assets/theme.css 中覆盖令牌实现换肤
 *
 * 令牌分组：
 *   - color-primary / accent   主色与强调色
 *   - color-bg-*               背景层级
 *   - color-border-*           边框
 *   - color-text-*             文字层级
 *   - radius-*                 圆角
 *   - shadow-*                 阴影
 *   - transition-*             过渡时长
 *   - safe-*                   iPhone 安全区
 *   - layout-*                 布局尺寸（容器宽度/间距）
 */

/* ============ 基础令牌（浅色模式默认值） ============ */
:root {
  /* —— 主色：深空青橙方案 —— */
  --color-primary: #06b6d4;          /* Cyan-500 */
  --color-primary-hover: #0891b2;    /* Cyan-600 */
  --color-primary-light: #22d3ee;    /* Cyan-400 */
  --color-primary-soft: rgba(6, 182, 212, 0.12);

  /* —— 强调色：活力橙（冷色基底+暖色 CTA） —— */
  --color-accent: #f97316;           /* Orange-500 */
  --color-accent-hover: #ea580c;     /* Orange-600 */
  --color-accent-light: #fb923c;     /* Orange-400 */
  --color-accent-soft: rgba(249, 115, 22, 0.12);

  /* —— 语义色 —— */
  --color-success: #10b981;          /* Emerald-500 */
  --color-warning: #f59e0b;          /* Amber-500 */
  --color-danger: #ef4444;           /* Red-500 */
  --color-info: #3b82f6;             /* Blue-500 */

  /* —— 背景层级 —— */
  --color-bg-tactical: #0f172a;      /* Slate-950，Hero 区深色底 */
  --color-bg-tactical-2: #1e293b;    /* Slate-800，Hero 区次级底 */
  --color-bg-page: #f9fafb;          /* 页面背景 */
  --color-bg-card: #ffffff;          /* 卡片背景 */
  --color-bg-input: #f9fafb;         /* 输入框背景 */
  --color-bg-hover: #f3f4f6;         /* 悬停背景 */

  /* —— 边框 —— */
  --color-border: #e5e7eb;           /* Gray-200 */
  --color-border-hover: #d1d5db;     /* Gray-300 */
  --color-border-strong: #9ca3af;    /* Gray-400 */

  /* —— 文字层级 —— */
  --color-text: #111827;             /* Gray-900，正文 */
  --color-text-muted: #6b7280;       /* Gray-500，次要 */
  --color-text-placeholder: #6b7280; /* Gray-500，占位（对比度4.5:1） */
  --color-text-inverse: #ffffff;     /* 反白 */

  /* —— 圆角 —— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.15);
  --shadow-focus-accent: 0 0 0 3px rgba(249, 115, 22, 0.18);

  /* —— 过渡 —— */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* —— 布局尺寸 —— */
  --layout-container-sm: 640px;
  --layout-container-md: 768px;
  --layout-container-lg: 1024px;
  --layout-container-xl: 1280px;
  --layout-container-2xl: 1536px;
  --layout-header-height: 64px;
  --layout-sidebar-width: 240px;
  --layout-gap-xs: 0.5rem;
  --layout-gap-sm: 1rem;
  --layout-gap-md: 1.5rem;
  --layout-gap-lg: 2rem;
  --layout-gap-xl: 3rem;

  /* —— 字体 —— */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* —— iPhone 安全区域 —— */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* —— z-index 层级 —— */
  --z-base: 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;
}

/* ============ 深色模式覆盖 ============ */
.dark {
  --color-bg-page: #0f172a;          /* Slate-950 */
  --color-bg-card: #1e293b;          /* Slate-800 */
  --color-bg-input: #0f172a;         /* 与背景同色，靠边框区分 */
  --color-bg-hover: #334155;         /* Slate-700 */

  --color-border: #334155;           /* Slate-700 */
  --color-border-hover: #475569;     /* Slate-600 */
  --color-border-strong: #64748b;    /* Slate-500 */

  --color-text: #f1f5f9;             /* Slate-100 */
  --color-text-muted: #94a3b8;       /* Slate-400 */
  --color-text-placeholder: #64748b; /* Slate-500 */

  --color-primary-soft: rgba(34, 211, 238, 0.18);
  --color-accent-soft: rgba(249, 115, 22, 0.18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(34, 211, 238, 0.28);
  --shadow-focus-accent: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

/* ============ 安全区工具类 ============ */
.pb-safe { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.pt-safe { padding-top: calc(env(safe-area-inset-top, 0px) + 1rem); }
.pl-safe { padding-left: env(safe-area-inset-left, 0px); }
.pr-safe { padding-right: env(safe-area-inset-right, 0px); }

/* ============ 战术氛围工具类 ============ */
/* 扫描网格底纹：用于 Hero 区/暗色区块，模拟战术 HUD */
.tactical-grid {
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 径向辉光：用于 Hero 区角落 */
.tactical-glow-cyan {
  background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.2;
}
.tactical-glow-accent {
  background: radial-gradient(circle, var(--color-accent-light) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.15;
}

/* 玻璃卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark .glass-card {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.12);
}

/* 文字渐变（主色） */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 文字渐变（主色→强调色） */
.text-gradient-hero {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}