/* ============================================================
   1-base / tokens.css
   设计令牌：颜色、阴影、圆角、间距、主题变量
   来源：website-complete / styles.css — 原始设计稿
   仅包含 CSS 自定义属性，不含任何选择器规则
   ============================================================ */

:root {
    /* === Brand === */
    --color-primary: #E53935;
    --color-primary-hover: #D32F2F;
    --color-accent: #10B981;

    /* === Backgrounds === */
    --bg-body: #F5F5F7;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-hover: #F7F7F8;
    --bg-input: #F5F5F7;

    /* === Text === */
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #8E8E93;
    --text-placeholder: #AEAEB2;

    /* === Borders === */
    --border-light: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);

    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* === Radius === */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;

    /* === Layout === */
    --sidebar-width: 72px;
    --topbar-height: 56px;

    /* === Motion === */
    --transition: 0.2s ease;

    /* === Avatar gradient === */
    --color-avatar-start: #667eea;
    --color-avatar-end:   #764ba2;
    --gradient-avatar: linear-gradient(135deg, var(--color-avatar-start) 0%, var(--color-avatar-end) 100%);

    /* === Container widths (Container System) ===
       全站"内容容器"尺寸规范，container.css 使用 */
    --container-wide:     1440px;
    --container-standard: 1200px;
    --container-reading:  800px;
    --container-form:     640px;
    --container-auth:     440px;

    /* === Responsive content padding === */
    --content-padding-x: clamp(16px, 3vw, 40px);
    --content-padding-y: clamp(24px, 4vw, 48px);

    /* === Gap scale === */
    --gap-xs:  8px;
    --gap-sm:  12px;
    --gap-md:  16px;
    --gap-lg:  24px;
    --gap-xl:  32px;
    --gap-2xl: 48px;
}

/* === Dark theme override === */
[data-theme="dark"] {
    --bg-body: #121214;
    --bg-sidebar: #1C1C1E;
    --bg-card: #1C1C1E;
    --bg-hover: #2C2C2E;
    --bg-input: #2C2C2E;
    --text-primary: #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary: #6E6E73;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
}