/* ========================================
   Design System v4.0 - Warm Professional
   life-windows-site · 2026-05-16
   
   风格定位：
   - 温暖但不甜腻
   - 专业但不冰冷
   - 类似 Apple Health / Notion / 规划类 App
   ======================================== */

/* === LIGHT MODE === */
:root,
[data-theme="light"] {
  /* === 背景层级 === */
  --bg-base: #faf9f7;
  --bg-surface: #fff;
  --bg-card: #fff;
  --bg-card-alt: #f5f3f0;
  --bg-hover: #f0eeea;
  --border: #e8e4df;
  --border-subtle: #f0eeea;
  --border-strong: #d4cfc8;

  /* === 强调色 - 温暖红 === */
  --accent: #d9534f;
  --accent-hover: #c9302c;
  --accent-2: #e88a87;
  --accent-bg: #fdf2f1;
  --accent-glow: rgb(217 83 79 / 15%);

  /* === 语义状态色 === */
  --status-open: #5cb85c;
  --status-open-bg: rgb(92 184 92 / 10%);
  --status-open-border: rgb(92 184 92 / 30%);
  --status-closing: #f0ad4e;
  --status-closing-bg: rgb(240 173 78 / 10%);
  --status-closing-border: rgb(240 173 78 / 30%);
  --status-closed: #d9534f;
  --status-closed-bg: rgb(217 83 79 / 10%);
  --status-closed-border: rgb(217 83 79 / 30%);

  /* === 文字层级 === */
  --text: #2d2926;
  --text-2: #6b6560;
  --text-3: #9c9690;
  --text-inverse: #fff;

  /* === 文字色别名 === */
  --text-primary: #2d2926;
  --text-secondary: #6b6560;
  --text-muted: #9c9690;

  /* === 圆角色号 === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* === 阴影 - 柔和但有深度 === */
  --shadow-xs: 0 1px 2px rgb(45 41 38 / 4%);
  --shadow-sm: 0 2px 4px rgb(45 41 38 / 6%);
  --shadow-md: 0 4px 12px rgb(45 41 38 / 8%);
  --shadow-lg: 0 8px 24px rgb(45 41 38 / 12%);
  --shadow-xl: 0 16px 48px rgb(45 41 38 / 16%);

  /* === 间距 === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === 字体 === */
  --font-main: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Noto Serif SC", Georgia, "Times New Roman", serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);

  /* === 动效 === */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* === 毛玻璃 === */
  --glass-bg: rgb(255 255 255 / 85%);
  --glass-border: rgb(255 255 255 / 60%);
  --glass-blur: blur(20px) saturate(180%);

  /* === 别名兼容 === */
  --bg: var(--bg-base);
  --bg2: var(--bg-surface);
  --bg3: var(--bg-card-alt);
  --card: var(--bg-card);
  --card2: var(--bg-card-alt);
  --font: var(--font-main);
  --font-mono: var(--font-num);
}

/* === DARK MODE === */
[data-theme="dark"] {
  /* === 背景层级 === */
  --bg-base: #1a1816;
  --bg-surface: #242220;
  --bg-card: #2a2826;
  --bg-card-alt: #32302e;
  --bg-hover: #3a3836;
  --border: #3d3a37;
  --border-subtle: #343231;
  --border-strong: #4d4a47;

  /* === 强调色 - 温暖红（暗色模式下更鲜明）=== */
  --accent: #e07b77;
  --accent-hover: #f0908d;
  --accent-2: #c9625f;
  --accent-bg: rgb(224 123 119 / 12%);
  --accent-glow: rgb(224 123 119 / 20%);

  /* === 语义状态色 === */
  --status-open: #6fcf97;
  --status-open-bg: rgb(111 207 151 / 12%);
  --status-open-border: rgb(111 207 151 / 30%);
  --status-closing: #f2c94c;
  --status-closing-bg: rgb(242 201 76 / 12%);
  --status-closing-border: rgb(242 201 76 / 30%);
  --status-closed: #eb5757;
  --status-closed-bg: rgb(235 87 87 / 12%);
  --status-closed-border: rgb(235 87 87 / 30%);

  /* === 文字层级 === */
  --text: #f5f3f0;
  --text-2: #a8a29e;
  --text-3: #78716c;
  --text-inverse: #1a1816;
  --text-primary: #f5f3f0;
  --text-secondary: #a8a29e;
  --text-muted: #78716c;

  /* === 阴影 === */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 20%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 25%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 30%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 40%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 50%);

  /* === 毛玻璃 === */
  --glass-bg: rgb(42 40 38 / 85%);
  --glass-border: rgb(255 255 255 / 8%);
  --glass-blur: blur(20px) saturate(180%);
}

/* === ART NOUVEAU - Light === */
[data-theme="art-nouveau"] {
  /* === 背景层级 === */
  --bg-base: #f4efe6;
  --bg-surface: #fff;
  --bg-card: #fff;
  --bg-card-alt: #e8e1d5;
  --bg-hover: #f5f0e8;
  --border: #d4c9b8;
  --border-subtle: #e8e1d5;
  --border-strong: #c4b8a5;

  /* === 强调色 - 金色与绿色 === */
  --accent: #b8860b;
  --accent-hover: #d4a020;
  --accent-2: #2e8b57;
  --accent-3: #8b4513;
  --accent-bg: rgb(184 134 11 / 8%);
  --accent-glow: rgb(184 134 11 / 15%);

  /* === 语义状态色 === */
  --status-open: #2e8b57;
  --status-open-bg: rgb(46 139 87 / 10%);
  --status-open-border: rgb(46 139 87 / 30%);
  --status-closing: #b8860b;
  --status-closing-bg: rgb(184 134 11 / 10%);
  --status-closing-border: rgb(184 134 11 / 30%);
  --status-closed: #8b4513;
  --status-closed-bg: rgb(139 69 19 / 10%);
  --status-closed-border: rgb(139 69 19 / 30%);

  /* === 文字层级 === */
  --text: #2c2416;
  --text-2: #5a4d38;
  --text-3: #8a7d66;
  --text-inverse: #fff;
  --text-primary: #2c2416;
  --text-secondary: #5a4d38;
  --text-muted: #8a7d66;

  /* === 圆角色号 - 更锐利 === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === 阴影 === */
  --shadow-xs: 0 1px 2px rgb(44 36 22 / 0.04%);
  --shadow-sm: 0 2px 4px rgb(44 36 22 / 0.06%);
  --shadow-md: 0 4px 12px rgb(44 36 22 / 0.08%);
  --shadow-lg: 0 8px 24px rgb(44 36 22 / 0.12%);
  --shadow-xl: 0 16px 48px rgb(44 36 22 / 0.16%);

  /* === 字体 === */
  --font-main: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(3rem, 6vw, 5rem);

  /* === 动效 === */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 500ms;

  /* === 毛玻璃 === */
  --glass-bg: rgb(255 255 255 / 85%);
  --glass-border: rgb(255 255 255 / 60%);
  --glass-blur: blur(16px) saturate(160%);

  /* === 别名兼容 === */
  --bg: var(--bg-base);
  --bg2: var(--bg-surface);
  --bg3: var(--bg-card-alt);
  --card: var(--bg-card);
  --card2: var(--bg-card-alt);
  --font: var(--font-main);
  --font-mono: var(--font-num);
}

/* === ART NOUVEAU - Dark === */
[data-theme="art-nouveau-dark"] {
  /* === 背景层级 === */
  --bg-base: #1c1814;
  --bg-surface: #242018;
  --bg-card: #2c2820;
  --bg-card-alt: #343028;
  --bg-hover: #3c3828;
  --border: #4a4438;
  --border-subtle: #343028;
  --border-strong: #5a5048;

  /* === 强调色 === */
  --accent: #d4a020;
  --accent-hover: #e8b830;
  --accent-2: #5cb85c;
  --accent-3: #c9a227;
  --accent-bg: rgb(212 160 32 / 12%);
  --accent-glow: rgb(212 160 32 / 20%);

  /* === 语义状态色 === */
  --status-open: #6fcf97;
  --status-open-bg: rgb(111 207 151 / 12%);
  --status-open-border: rgb(111 207 151 / 30%);
  --status-closing: #f2c94c;
  --status-closing-bg: rgb(242 201 76 / 12%);
  --status-closing-border: rgb(242 201 76 / 30%);
  --status-closed: #eb5757;
  --status-closed-bg: rgb(235 87 87 / 12%);
  --status-closed-border: rgb(235 87 87 / 30%);

  /* === 文字层级 === */
  --text: #f0ebe3;
  --text-2: #c9c4bc;
  --text-3: #a8a298;
  --text-inverse: #1c1814;
  --text-primary: #f0ebe3;
  --text-secondary: #c9c4bc;
  --text-muted: #a8a298;

  /* === 阴影 === */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.2%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.25%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.3%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.4%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 0.5%);

  /* === 毛玻璃 === */
  --glass-bg: rgb(44 40 32 / 85%);
  --glass-border: rgb(255 255 255 / 8%);
  --glass-blur: blur(16px) saturate(160%);

  /* === 别名兼容 === */
  --bg: var(--bg-base);
  --bg2: var(--bg-surface);
  --bg3: var(--bg-card-alt);
  --card: var(--bg-card);
  --card2: var(--bg-card-alt);
  --font: var(--font-main);
  --font-mono: var(--font-num);
}