/* ==========================================================================
   观衍 · 设计令牌（v5 / Apple HIG）
   --------------------------------------------------------------------------
   本文件是全站**唯一**允许出现颜色字面量的地方。页面样式（style.css、
   内联样式、脚本）只能引用这里的语义令牌。

   命名分两套：
   - 语义主名（新代码优先）：--label / --secondary-label / --tertiary-label /
     --tint / --tint-weak / --danger / --success / --warning / --radius-s|m|l /
     --motion
   - 兼容别名（旧样式继续可用）：--label-2 / --label-3 / --tint-soft /
     --red / --green / --orange / --r-sm|md|lg
   三套外观：:root 浅色 → [data-theme="dark"] 深色 → 系统深色兜底（无 JS 时）。
   ========================================================================== */

/* ------------------------------ 浅色（默认） ------------------------------ */
:root {
  color-scheme: light dark;

  /* 字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
    "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --font-display: var(--font-ui);
  --text-body: 15px;
  --text-footnote: 13px;
  --text-caption: 12px;

  /* 间距（8pt 栅格，4 的倍数） */
  --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;

  /* 圆角：10 / 12 / 18 + 胶囊 */
  --radius-xs: 8px;
  --radius-s: 10px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  /* 兼容别名（旧样式） */
  --r-xs: var(--radius-xs);
  --r-sm: var(--radius-s);
  --r-md: var(--radius-m);
  --r-lg: var(--radius-l);
  --r-xl: var(--radius-xl);
  --r-2xl: var(--radius-2xl);
  --r-3xl: var(--radius-3xl);

  /* 背景 / 表面 / 填充 */
  --bg: #f2f2f7;
  --bg-wash: radial-gradient(1200px 560px at 50% -240px, rgba(0, 122, 255, .07), transparent 72%);
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-sunken: #f2f2f7;
  --fill: rgba(118, 118, 128, .14);
  --fill-2: rgba(118, 118, 128, .08);
  --fill-3: rgba(118, 118, 128, .20);

  /* 文字 */
  --label: #1c1c1e;
  --secondary-label: #636366;
  --tertiary-label: #6e6e73;
  --label-inverse: #ffffff;
  --on-accent: #ffffff;
  --tile-master: linear-gradient(135deg, #ffb340, #ff375f);
  --label-2: var(--secondary-label);
  --label-3: var(--tertiary-label);

  /* 分隔线 / 描边 */
  --separator: rgba(60, 60, 67, .12);
  --separator-strong: rgba(60, 60, 67, .22);
  --card-border: rgba(0, 0, 0, .05);
  --border-width: .5px;

  /* 强调色 */
  --tint: #007aff;
  --tint-strong: #0066d6;
  --tint-weak: rgba(0, 122, 255, .12);
  --tint-soft: var(--tint-weak);
  --tint-ring: rgba(0, 122, 255, .34);

  /* 语义色：成功 / 危险 / 警告 / 紫 */
  --success: #34c759;
  --success-text: #197a33;
  --success-weak: rgba(52, 199, 89, .14);
  --danger: #ff3b30;
  --danger-text: #d70015;
  --danger-weak: rgba(255, 59, 48, .10);
  --warning: #ff9500;
  --warning-text: #b25000;
  --warning-weak: rgba(255, 149, 0, .14);
  --purple: #af52de;
  --purple-weak: rgba(175, 82, 222, .12);
  /* 兼容别名（旧样式） */
  --green: var(--success);
  --green-text: var(--success-text);
  --green-soft: var(--success-weak);
  --red: var(--danger);
  --red-text: var(--danger-text);
  --red-soft: var(--danger-weak);
  --orange: var(--warning);
  --orange-text: var(--warning-text);
  --orange-soft: var(--warning-weak);
  --purple-soft: var(--purple-weak);

  /* 材质 / 阴影 */
  --material: rgba(255, 255, 255, .72);
  --material-strong: rgba(255, 255, 255, .84);
  --nav-bg: rgba(255, 255, 255, .72);
  --nav-border: rgba(0, 0, 0, .08);
  --blur: saturate(180%) blur(20px);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .045);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 44px rgba(0, 0, 0, .10);
  --shadow-3: 0 30px 80px rgba(0, 0, 0, .18);
  --shadow-card: var(--shadow-1);
  --shadow-inset-line: inset 0 .5px 0 rgba(255, 255, 255, .55);

  /* 终端（两种外观都用深色，像 Xcode 控制台） */
  --console-bg: #1c1c1e;
  --console-bar: #2c2c2e;
  --console-fg: #e5e5ea;
  --console-dim: #8e8e93;
  --console-ok: #7ee2a8;
  --console-err: #ff8a80;
  --console-close: #ff5f57;
  --console-min: #febc2e;
  --console-max: #28c840;

  /* 应用图标渐变（品牌资产，集中在此） */
  --tile-dsh: linear-gradient(150deg, #2f8cff 0%, #0a84ff 45%, #5e5ce6 100%);
  --tile-hermes: linear-gradient(150deg, #46e08a 0%, #30d158 40%, #32ade6 100%);
  --tile-panel: linear-gradient(150deg, #ffb340 0%, #ff9500 40%, #ff375f 100%);
  --tile-personal: linear-gradient(150deg, #c77cf3 0%, #af52de 45%, #5e5ce6 100%);
  --tile-business: linear-gradient(150deg, #a1a1a6 0%, #8e8e93 45%, #48484a 100%);
  --tile-server: linear-gradient(150deg, #6fd6ff 0%, #64d2ff 40%, #0a84ff 100%);
  --tile-generic: linear-gradient(150deg, #6fd6ff 0%, #64d2ff 40%, #0a84ff 100%);
  --tile-admin: linear-gradient(150deg, #8e8e93 0%, #636366 55%, #3a3a3c 100%);

  /* 尺寸 / 节奏 */
  --content-max: 1120px;
  --nav-h: 52px;
  --tabbar-h: 56px;
  --touch-min: 44px;

  /* 动效：0.2–0.35s；尊重 prefers-reduced-motion */
  --motion: .24s;
  --motion-fast: .2s;
  --motion-slow: .32s;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);

  /* 打印（页面样式只引用，不写字面量） */
  --print-bg: #ffffff;
  --print-fg: #000000;
  --print-border: #dddddd;

  /* 高对比度覆盖用的令牌（见文末 media） */
  --label-2-contrast: #3c3c43;
  --label-3-contrast: #636366;
  --separator-contrast: rgba(60, 60, 67, .28);
  --label-2-contrast-dark: rgba(235, 235, 245, .82);
  --label-3-contrast-dark: rgba(235, 235, 245, .6);
}

/* ------------------------------ 深色 ------------------------------ */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-wash: radial-gradient(1200px 560px at 50% -240px, rgba(10, 132, 255, .10), transparent 72%);
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-sunken: #000000;
  --fill: rgba(120, 120, 128, .26);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(120, 120, 128, .34);

  --label: #f5f5f7;
  --secondary-label: rgba(235, 235, 245, .64);
  --tertiary-label: rgba(235, 235, 245, .52);
  --label-inverse: #000000;

  --separator: rgba(84, 84, 88, .55);
  --separator-strong: rgba(84, 84, 88, .78);
  --card-border: rgba(255, 255, 255, .075);

  --tint: #0a84ff;
  --tint-strong: #409cff;
  --tint-weak: rgba(10, 132, 255, .22);
  --tint-ring: rgba(10, 132, 255, .48);

  --success: #30d158;
  --success-text: #30d158;
  --success-weak: rgba(48, 209, 88, .18);
  --danger: #ff453a;
  --danger-text: #ff6961;
  --danger-weak: rgba(255, 69, 58, .16);
  --warning: #ff9f0a;
  --warning-text: #ffb340;
  --warning-weak: rgba(255, 159, 10, .18);
  --purple: #bf5af2;
  --purple-weak: rgba(191, 90, 242, .20);

  --material: rgba(22, 22, 24, .74);
  --material-strong: rgba(28, 28, 30, .84);
  --nav-bg: rgba(18, 18, 20, .72);
  --nav-border: rgba(255, 255, 255, .08);
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .55), 0 20px 50px rgba(0, 0, 0, .50);
  --shadow-3: 0 30px 90px rgba(0, 0, 0, .70);
  --shadow-inset-line: inset 0 .5px 0 rgba(255, 255, 255, .08);

  --console-bg: #141416;
  --console-bar: #1f1f22;
  --console-fg: #e5e5ea;
  --console-dim: #98989d;
}

/* -------------------- 系统深色兜底（无 JS / 首屏前） --------------------
   theme.js 正常会把 data-theme 写在 <html> 上；这里只覆盖「用户明确选浅色」
   以外的情况，保证禁用 JS 时仍跟随系统。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-wash: radial-gradient(1200px 560px at 50% -240px, rgba(10, 132, 255, .10), transparent 72%);
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-sunken: #000000;
    --fill: rgba(120, 120, 128, .26);
    --fill-2: rgba(120, 120, 128, .16);
    --fill-3: rgba(120, 120, 128, .34);

    --label: #f5f5f7;
    --secondary-label: rgba(235, 235, 245, .64);
    --tertiary-label: rgba(235, 235, 245, .52);
    --label-inverse: #000000;

    --separator: rgba(84, 84, 88, .55);
    --separator-strong: rgba(84, 84, 88, .78);
    --card-border: rgba(255, 255, 255, .075);

    --tint: #0a84ff;
    --tint-strong: #409cff;
    --tint-weak: rgba(10, 132, 255, .22);
    --tint-ring: rgba(10, 132, 255, .48);

    --success: #30d158;
    --success-text: #30d158;
    --success-weak: rgba(48, 209, 88, .18);
    --danger: #ff453a;
    --danger-text: #ff6961;
    --danger-weak: rgba(255, 69, 58, .16);
    --warning: #ff9f0a;
    --warning-text: #ffb340;
    --warning-weak: rgba(255, 159, 10, .18);
    --purple: #bf5af2;
    --purple-weak: rgba(191, 90, 242, .20);

    --material: rgba(22, 22, 24, .74);
    --material-strong: rgba(28, 28, 30, .84);
    --nav-bg: rgba(18, 18, 20, .72);
    --nav-border: rgba(255, 255, 255, .08);
    --shadow-1: 0 1px 1px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .55), 0 20px 50px rgba(0, 0, 0, .50);
    --shadow-3: 0 30px 90px rgba(0, 0, 0, .70);
    --shadow-inset-line: inset 0 .5px 0 rgba(255, 255, 255, .08);

    --console-bg: #141416;
    --console-bar: #1f1f22;
    --console-fg: #e5e5ea;
    --console-dim: #98989d;
  }
}

/* -------------------- 提高对比度（只改令牌值） -------------------- */
@media (prefers-contrast: more) {
  :root {
    --secondary-label: var(--label-2-contrast);
    --tertiary-label: var(--label-3-contrast);
    --separator: var(--separator-contrast);
  }
  :root[data-theme="dark"] {
    --secondary-label: var(--label-2-contrast-dark);
    --tertiary-label: var(--label-3-contrast-dark);
  }
}