/*
 * _variables.css — 设计变量
 * ==========================
 *
 * 所有颜色、圆角、阴影、间距、字体集中在此处。后续要换强调色或调整暗色级别，
 * 只动这一份文件即可。
 *
 * 命名约定：
 * - --bg-N      背景层级，N 越大越亮（在暗色中"亮"指次级层、卡片、hover）
 * - --text-N    文字层级，1=主文本，2=次级，3=辅助/禁用
 * - --primary   主强调色（按钮主操作、激活态、链接）
 * - --accent    辅强调色（图标渐变、二级强调）
 * - --semantic  success/warning/danger/info
 * - --radius-*  圆角
 * - --shadow-*  阴影
 * - --space-N   间距阶梯
 * - --font-*    字体
 */

html[data-skin="dark"],
body[data-skin="dark"] {
    /* === 背景层级 === */
    --bg-1: #0B1020;            /* 主背景（页面整体） */
    --bg-2: #141A2E;            /* 次级背景（侧边栏、卡片） */
    --bg-3: #1E2540;            /* 三级背景（hover、激活、表格深行） */
    --bg-elevated: #1A2138;     /* 弹窗、下拉、悬浮层背景 */
    --bg-input: #0E1426;        /* 输入框、textarea 背景 */

    /* === 文字层级 === */
    --text-1: #E6E8EF;          /* 主文本 */
    --text-2: #8A93A8;          /* 次级文本、说明 */
    --text-3: #4A5168;          /* 辅助文本、占位符、禁用 */
    --text-on-primary: #061018; /* 强调色背景上的文字（深色，与青色对比） */

    /* === 强调色 === */
    --primary: #00E5FF;         /* 主强调（青色霓虹） */
    --primary-hover: #38ECFF;
    --primary-active: #00B8CC;
    --primary-glow: rgba(0, 229, 255, 0.25);
    --primary-soft: rgba(0, 229, 255, 0.08);  /* 低透明度版本，用于背景 */

    --accent: #7C5CFF;          /* 辅强调（紫色，图标渐变、二级强调） */
    --accent-soft: rgba(124, 92, 255, 0.12);

    /* === 语义色 === */
    --success: #22C55E;
    --success-soft: rgba(34, 197, 94, 0.12);
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --danger: #EF4444;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info: #3B82F6;
    --info-soft: rgba(59, 130, 246, 0.12);

    /* === 边框、分隔线 === */
    --border: rgba(255, 255, 255, 0.12);       /* 标准边框 */
    --border-strong: rgba(255, 255, 255, 0.2); /* 强对比边框（输入框） */
    --divider: rgba(255, 255, 255, 0.08);      /* 表格行分隔、卡片内分隔 */

    /* === 圆角 === */
    --radius-xs: 4px;
    --radius-sm: 6px;     /* 按钮、输入框 */
    --radius-md: 8px;     /* 标签、徽章 */
    --radius-lg: 12px;    /* 卡片 */
    --radius-xl: 16px;    /* 大卡片、面板 */

    /* === 阴影 === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px var(--primary-glow);
    --shadow-glow: 0 0 12px var(--primary-glow);

    /* === 间距阶梯 === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* === 字体 === */
    --font-family: "Inter", "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", Menlo, Consolas, monospace;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;       /* 默认 */
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;

    /* === 行高 === */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* === 过渡 === */
    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

    /* === 主框架布局尺寸（仅供本皮肤内部参考，不强制覆盖原 swiftadmin layout） ===
     * 注意：实际的 .layui-header / .layui-side / .layui-body 尺寸由 swiftadmin
     * style.css 维持（header 50px、sidebar 238px 等），本皮肤"只改色不改 layout"。
     */
    --header-height: 50px;
    --sidebar-width: 238px;
    --tab-height: 40px;
}