/**
 * 设计 Token —— 全站视觉的唯一来源
 * ================================
 *
 * 规则：
 *   1. 所有颜色以「RGB 通道值」形式声明（`--c-*`），便于 Tailwind 用
 *      `rgb(var(--c-x) / <alpha-value>)` 消费，从而保留 `bg-x/50` 这类透明度修饰符。
 *   2. 组件层（components.css）只允许使用本文件里的语义别名（`--surface-*`、`--fg-*` 等），
 *      不得出现裸色号。
 *   3. 深色主题只在本文件末尾覆盖 `--c-*` 通道值，组件层无需写任何 `dark:` 变体。
 *   4. 改配色 = 只改本文件。Tailwind 侧的名字映射在 static/js/theme-config.js。
 */

:root {
    /* ---- 强调色：indigo（参考图提取值 ≈ #6366f1） ---- */
    --c-primary-50: 238 242 255;
    --c-primary-100: 224 231 255;
    --c-primary-200: 199 210 254;
    --c-primary-300: 165 180 252;
    --c-primary-400: 129 140 248;
    --c-primary-500: 99 102 241;
    --c-primary-600: 79 70 229;
    --c-primary-700: 67 56 202;
    --c-primary-800: 55 48 163;
    --c-primary-900: 49 46 129;

    /* ---- 表面：白为主，靠 hairline 而非背景色差分层 ---- */
    --c-surface-0: 255 255 255;   /* 卡片 / 侧边栏 */
    --c-surface-1: 248 249 251;   /* 页面底色、输入框内填充 */
    --c-surface-2: 241 242 245;   /* hover 填充、chip */
    --c-surface-3: 232 234 238;   /* 按下态、进度槽 */

    /* ---- 描边 ---- */
    --c-border: 235 236 238;      /* hairline，默认分隔线 */
    --c-border-strong: 219 222 227;

    /* ---- 前景 ---- */
    --c-fg: 22 24 29;             /* 参考图实测 #16181d */
    --c-fg-secondary: 75 80 88;
    --c-fg-muted: 138 144 153;
    --c-fg-subtle: 168 173 181;
    --c-fg-on-primary: 255 255 255;

    /* ---- 状态色 ---- */
    --c-success: 22 163 74;
    --c-warning: 217 119 6;
    --c-danger: 220 38 38;
    --c-danger-strong: 185 28 28;  /* 弱填充底上的危险文字：--c-danger 压在淡红底上只有 4.28:1 */
    --c-info: 2 132 199;

    /* ---- 语义别名：组件层只用这一组 ---- */
    --surface-0: rgb(var(--c-surface-0));
    --surface-1: rgb(var(--c-surface-1));
    --surface-2: rgb(var(--c-surface-2));
    --surface-3: rgb(var(--c-surface-3));
    --border: rgb(var(--c-border));
    --border-strong: rgb(var(--c-border-strong));
    --fg: rgb(var(--c-fg));
    --fg-secondary: rgb(var(--c-fg-secondary));
    --fg-muted: rgb(var(--c-fg-muted));
    --fg-subtle: rgb(var(--c-fg-subtle));
    --accent: rgb(var(--c-primary-600));
    --accent-hover: rgb(var(--c-primary-700));
    --accent-soft: rgb(var(--c-primary-50));
    --accent-soft-hover: rgb(var(--c-primary-100));
    --accent-fg: rgb(var(--c-fg-on-primary));
    --accent-ring: rgb(var(--c-primary-500) / 0.35);
    --danger: rgb(var(--c-danger));
    --danger-strong: rgb(var(--c-danger-strong));
    --danger-soft: rgb(var(--c-danger) / 0.08);
    --danger-soft-hover: rgb(var(--c-danger) / 0.14);
    --danger-border: rgb(var(--c-danger) / 0.28);

    /* ---- 压在图像/视频上的前景与遮罩 ----
       海报上的角标不能用 --surface-* / --fg-*：那两组要跟随明暗主题反转，
       而封面图本身不反转，跟随主题会在浅色模式下变成白底白字。这里固定为
       深色遮罩 + 反色文字，两种主题下都压得住任意封面。 */
    --scrim: rgb(var(--c-fg) / 0.62);
    --scrim-soft: rgb(var(--c-fg) / 0.45);
    --on-media: rgb(var(--c-fg-on-primary));
    --media-letterbox: rgb(var(--c-fg));

    /* ---- 圆角：只有这四档，模板里不要再出现别的 ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- 阴影：三档，参考图整体弱阴影，主要靠 hairline ---- */
    --shadow-1: 0 1px 2px rgb(var(--c-fg) / 0.04);
    --shadow-2: 0 4px 12px rgb(var(--c-fg) / 0.06);
    --shadow-3: 0 12px 32px rgb(var(--c-fg) / 0.10);

    /* ---- 排版 ---- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- 布局：参考图实测侧栏 ≈235px、内容左边距 ≈30px ---- */
    --sidebar-w: 240px;
    --mobile-header-h: 56px;
    /* 小屏顶栏实际占位（含刘海安全区），抽屉与遮罩的 top 偏移都用它 */
    --header-total: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
    --gutter: 30px;
    --gutter-sm: 16px;
    --content-max: 1280px;
    --card-gap: 12px;

    /* ---- 动效 ---- */
    --dur-fast: 120ms;
    --dur: 180ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 深色主题：只覆盖通道值。
 * 组件层与模板都不需要感知深色，因此不再手写 `dark:` 变体。
 */
html.dark {
    --c-surface-0: 22 24 29;
    --c-surface-1: 15 16 20;
    --c-surface-2: 31 34 41;
    --c-surface-3: 42 46 55;

    --c-border: 38 42 50;
    --c-border-strong: 55 60 71;

    --c-fg: 243 244 246;
    --c-fg-secondary: 195 200 208;
    --c-fg-muted: 139 146 156;
    --c-fg-subtle: 108 114 124;

    /* 深底上把强调色提亮一档，保证对比度 */
    --accent: rgb(var(--c-primary-500));
    --accent-hover: rgb(var(--c-primary-400));
    --accent-soft: rgb(var(--c-primary-500) / 0.16);
    --accent-soft-hover: rgb(var(--c-primary-500) / 0.24);

    --c-success: 34 197 94;
    --c-warning: 245 158 11;
    --c-danger: 248 113 113;
    --c-danger-strong: 252 165 165;  /* 深底反过来要更亮，不是更暗 */
    --c-info: 56 189 248;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (max-width: 640px) {
    :root {
        --gutter: var(--gutter-sm);
    }
}