/* ════════════════════════════════════════════════════════
   AuthKeystone Design Tokens —— 全站唯一权威源
   消费者：admin-ui(style.css @import 内联) / landing(index.html <link>) / docs(mdBook additional-css)
   原则：值照搬自原 admin-ui style.css，视觉零变化；命名用语义化（--bg-base / --text-primary）

   三态主题：light / dark / system（默认跟随系统 prefers-color-scheme）
   结构：① 结构 token（主题无关）② 原始色板（每色值定义一次）③ 语义 token 映射（随 data-theme 切）
   特异性：:root / [data-theme] / [data-theme]@media 均 (0,0,1,0) 同级，源顺序后者胜
   ════════════════════════════════════════════════════════ */

/* ─── 1. 结构 Token（主题无关：字号/间距/圆角/动效/层级/布局）─── */
:root {
  /* 字号 */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13.5px;
  --font-md: 14px;
  --font-lg: 15px;
  --font-xl: 16px;
  --font-2xl: 18px;
  --font-stat: 30px;

  /* 字重 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 间距（4px 节拍） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-control: 7px;
  --radius-lg: 8px;
  --radius-card: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* 动效 */
  --transition-fast: 0.12s ease;
  --transition-base: 0.15s ease;
  --transition-theme: 0.2s ease;

  /* 层级 */
  --z-sticky: 50;
  --z-modal: 100;

  /* 布局尺寸 */
  --sidebar-width: 220px;
  --content-pad-y: 28px;
  --content-pad-x: 32px;
  /* 弹窗操作区 */
  --modal-action-gap: 8px;
  --modal-action-primary-width: 96px;
  --modal-action-secondary-width: 72px;
  /* 导航图标 */
  --nav-icon-size: 22px;
  --nav-icon-gap: 7px;
  /* 表格长文本列（全站统一截断省略：常规档=ID/hash/描述，宽档=URL/端点/折行列） */
  --cell-ellipsis-w: 240px;
  --cell-ellipsis-w-wide: 360px;
}

/* ─── 2. 原始色板（每色值只定义一次，供语义 token 映射引用）─── */
:root {
  /* 深色原始值 */
  --dark-bg-base: #0A0A0B;
  --dark-bg-surface: #111113;
  --dark-bg-elevated: #18181B;
  --dark-bg-hover: #1F1F23;
  --dark-text-primary: #FAFAFA;
  --dark-text-secondary: #A1A1AA;
  --dark-text-tertiary: #71717A;
  --dark-border: #27272A;
  --dark-border-strong: #3F3F46;
  --dark-accent: #5B8DEF;
  --dark-accent-hover: #7BA4F7;
  --dark-accent-dim: rgba(91, 141, 239, 0.12);
  --dark-accent-glow: rgba(91, 141, 239, 0.35);
  --dark-accent2: #7C5CFC;
  --dark-success: #3ECF8E;
  --dark-success-dim: rgba(62, 207, 142, 0.12);
  --dark-danger: #F87171;
  --dark-danger-dim: rgba(248, 113, 113, 0.12);
  --dark-warning: #FBBF24;
  --dark-info: #5B8DEF;
  --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --dark-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);

  /* 浅色原始值 */
  --light-bg-base: #FFFFFF;
  --light-bg-surface: #FAFAFA;
  --light-bg-elevated: #FFFFFF;
  --light-bg-hover: #F4F4F5;
  --light-text-primary: #18181B;
  --light-text-secondary: #52525B;
  --light-text-tertiary: #A1A1AA;
  --light-border: #E4E4E7;
  --light-border-strong: #D4D4D8;
  --light-accent: #4A7BD8;
  --light-accent-hover: #3A6BC8;
  --light-accent-dim: rgba(74, 123, 216, 0.08);
  --light-accent-glow: rgba(74, 123, 216, 0.2);
  --light-accent2: #7C5CFC;
  --light-success: #16A34A;
  --light-success-dim: rgba(22, 163, 74, 0.1);
  --light-danger: #DC2626;
  --light-danger-dim: rgba(220, 38, 38, 0.1);
  --light-warning: #D97706;
  --light-info: #4A7BD8;
  --light-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --light-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --light-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* 品牌渐变（吸纳 AuthShell .brand-side 硬编码，system 模式自动跟随） */
  --brand-gradient-dark: linear-gradient(135deg, #0A0A0B 0%, #0E1126 45%, #131838 100%);
  --brand-gradient-light: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);

  /* 派生阴影：引用语义 --accent-glow（惰性求值，使用点解析当前主题值，故只定义一次） */
  --shadow-glow: 0 0 24px var(--accent-glow);
  --input-focus-shadow: 0 0 0 3px var(--accent-glow);
}

/* ─── 3. 语义 Token：默认 = dark（:root 回落，JS 未执行时不裸白刺眼）───
   :root 与 [data-theme="dark"] 合并选择器 = 三前端默认 dark 的根本保证 */
:root,
[data-theme="dark"] {
  --bg-base: var(--dark-bg-base);
  --bg-surface: var(--dark-bg-surface);
  --bg-elevated: var(--dark-bg-elevated);
  --bg-hover: var(--dark-bg-hover);

  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);

  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);

  --accent: var(--dark-accent);
  --accent-hover: var(--dark-accent-hover);
  --accent-dim: var(--dark-accent-dim);
  --accent-glow: var(--dark-accent-glow);
  --accent2: var(--dark-accent2);

  --success: var(--dark-success);
  --success-dim: var(--dark-success-dim);
  --danger: var(--dark-danger);
  --danger-dim: var(--dark-danger-dim);
  --warning: var(--dark-warning);
  --info: var(--dark-info);

  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --shadow-lg: var(--dark-shadow-lg);

  --brand-gradient: var(--brand-gradient-dark);
}

/* ─── 4. 语义 Token：显式浅色 ─── */
[data-theme="light"] {
  --bg-base: var(--light-bg-base);
  --bg-surface: var(--light-bg-surface);
  --bg-elevated: var(--light-bg-elevated);
  --bg-hover: var(--light-bg-hover);

  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-tertiary: var(--light-text-tertiary);

  --border: var(--light-border);
  --border-strong: var(--light-border-strong);

  --accent: var(--light-accent);
  --accent-hover: var(--light-accent-hover);
  --accent-dim: var(--light-accent-dim);
  --accent-glow: var(--light-accent-glow);
  --accent2: var(--light-accent2);

  --success: var(--light-success);
  --success-dim: var(--light-success-dim);
  --danger: var(--light-danger);
  --danger-dim: var(--light-danger-dim);
  --warning: var(--light-warning);
  --info: var(--light-info);

  --shadow-sm: var(--light-shadow-sm);
  --shadow-md: var(--light-shadow-md);
  --shadow-lg: var(--light-shadow-lg);

  --brand-gradient: var(--brand-gradient-light);
}

/* ─── 5. 语义 Token：跟随系统 ───
   深色系统：不命中此块，回落 :root 的 dark 映射
   浅色系统：命中此块，切到 light 映射（与 [data-theme="light"] 同源 --light-*） */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg-base: var(--light-bg-base);
    --bg-surface: var(--light-bg-surface);
    --bg-elevated: var(--light-bg-elevated);
    --bg-hover: var(--light-bg-hover);

    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);

    --border: var(--light-border);
    --border-strong: var(--light-border-strong);

    --accent: var(--light-accent);
    --accent-hover: var(--light-accent-hover);
    --accent-dim: var(--light-accent-dim);
    --accent-glow: var(--light-accent-glow);
    --accent2: var(--light-accent2);

    --success: var(--light-success);
    --success-dim: var(--light-success-dim);
    --danger: var(--light-danger);
    --danger-dim: var(--light-danger-dim);
    --warning: var(--light-warning);
    --info: var(--light-info);

    --shadow-sm: var(--light-shadow-sm);
    --shadow-md: var(--light-shadow-md);
    --shadow-lg: var(--light-shadow-lg);

    --brand-gradient: var(--brand-gradient-light);
  }
}