/*
 * 前台 · 设计令牌
 * ---------------------------------------------------------------------------
 * 分两层使用：
 *   1. 基元（primitive）：品牌色、状态色、间距、圆角、字体栈，来自
 *      shared/tokens.css —— 后台与前台共用同一份，改一处两端同时生效；
 *   2. 语义（semantic）：--ui-* 变量，前台所有样式文件只引用这一层。
 *
 * 深色主题只覆盖语义层（<html data-theme="dark">），不重复写任何组件规则。
 * 新增颜色前先找一找有没有现成的语义变量，不要在组件里写死色值。
 */

:root {
    color-scheme: light;

    /* ---------- 表面与描边 ---------- */

    --ui-canvas: #ffffff;                 /* 页面底色 */
    --ui-surface: #ffffff;                /* 卡片 / 面板底色 */
    --ui-surface-subtle: var(--bg-subtle); /* #f3f4f6：代码块、标签底、图标底 */
    --ui-surface-muted: #fafbfc;          /* 表头、块引用这类更浅一层 */
    --ui-border: var(--border-color);     /* #e3e6ec：常规描边、分隔线 */
    --ui-border-strong: var(--border-strong); /* #d1d5db：hover、虚线框 */

    /* ---------- 文字 ---------- */

    --ui-text: var(--text-primary);       /* #1f2329：正文与标题 */
    --ui-text-soft: var(--text-secondary);/* #6b7280：摘要、说明 */
    --ui-text-muted: #8a93a3;             /* 时间、计数、占位提示 */
    --ui-text-on-brand: var(--text-inverse);

    /* ---------- 品牌与状态 ---------- */

    --ui-brand: var(--brand);             /* #2563eb */
    --ui-brand-strong: #1d4ed8;           /* hover / active */
    --ui-brand-soft: var(--brand-soft);   /* #eef2ff：选中底、浅色强调 */
    --ui-success: var(--success);
    --ui-success-soft: #e7f5ef;
    --ui-warning: var(--warning);
    --ui-warning-soft: #fbf0dd;
    --ui-danger: var(--danger);
    --ui-danger-soft: #fcecec;

    /* ---------- 间距（4px 基准，对齐后台 --space-*） ---------- */

    --ui-space-1: var(--space-1);         /* 4px */
    --ui-space-2: var(--space-2);         /* 8px */
    --ui-space-3: var(--space-3);         /* 12px */
    --ui-space-4: var(--space-4);         /* 16px */
    --ui-space-5: var(--space-5);         /* 24px */
    --ui-space-6: var(--space-6);         /* 32px */
    --ui-space-7: 48px;
    --ui-space-8: 64px;
    --ui-space-9: 88px;

    /* ---------- 圆角 ---------- */

    --ui-radius-xs: 4px;
    --ui-radius-sm: var(--radius-sm);     /* 6px */
    --ui-radius-md: var(--radius-md);     /* 10px */
    --ui-radius-lg: 14px;
    --ui-radius-pill: var(--radius-pill);

    /* ---------- 字体与字号 ---------- */

    --ui-font-sans: var(--font-sans);
    --ui-font-mono: var(--font-mono);

    --ui-text-xs: 0.75rem;   /* 12px：时间、计数 */
    --ui-text-sm: 0.8125rem; /* 13px：辅助信息 */
    --ui-text-base: 0.9375rem; /* 15px：界面正文 */
    --ui-text-md: 1rem;      /* 16px：文章正文 */
    --ui-text-lg: 1.125rem;  /* 18px：列表标题 */
    --ui-text-xl: 1.375rem;  /* 22px：区块标题 */
    --ui-text-2xl: 1.75rem;  /* 28px：页面标题 */
    --ui-text-3xl: 2.5rem;   /* 40px：首页主标题 */

    /* ---------- 布局 ---------- */

    --ui-container: 1120px;  /* 页头 / 页脚 / 列表页宽度 */
    --ui-reading: 760px;     /* 文章正文可读行宽 */
    --ui-gutter: 24px;       /* 左右留白 */
    --ui-header-h: 64px;
    /* 页内锚点定位：吸顶页头高度 + 一点呼吸空间。
       窄屏时页头会折成两行，值随之下调（见文件末尾的媒体查询）。 */
    --ui-anchor-offset: calc(var(--ui-header-h) + var(--ui-space-4));
    --ui-sidebar-w: 248px;
    --ui-sidebar-gap: 56px;

    /* ---------- 阴影与动效 ---------- */

    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --ui-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.1);
    --ui-speed: 0.18s;
    --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 深色主题：只覆盖语义层 ---------- */

html[data-theme='dark'] {
    color-scheme: dark;

    --ui-canvas: #0b1220;
    --ui-surface: #101a2b;
    --ui-surface-subtle: #16233a;
    --ui-surface-muted: #0e1727;

    --ui-border: #1e2c45;
    --ui-border-strong: #2c3e5c;

    --ui-text: #e6ecf6;
    --ui-text-soft: #b3c0d3;
    --ui-text-muted: #7f8da3;
    --ui-text-on-brand: #ffffff;

    --ui-brand: #3b82f6;
    --ui-brand-strong: #60a5fa;
    --ui-brand-soft: rgba(59, 130, 246, 0.16);
    --ui-success: #34d399;
    --ui-success-soft: rgba(52, 211, 153, 0.14);
    --ui-warning: #fbbf24;
    --ui-warning-soft: rgba(251, 191, 36, 0.14);
    --ui-danger: #f87171;
    --ui-danger-soft: rgba(248, 113, 113, 0.14);

    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ui-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.36);
    --ui-shadow-md: 0 14px 32px rgba(0, 0, 0, 0.48);
}

/* 窄屏收紧留白与主标题，避免首屏被标题占满 */
@media (max-width: 640px) {
    :root {
        --ui-gutter: 18px;
        --ui-text-3xl: 1.875rem;
        --ui-text-2xl: 1.5rem;
        --ui-space-7: 36px;
        --ui-space-8: 48px;
        --ui-space-9: 56px;

        /* 页头在窄屏会折成两行（品牌 + 导航），锚点要再让开一些 */
        --ui-anchor-offset: calc(var(--ui-header-h) + 46px);
    }
}