/* ============================================================
   牢里 · 玻璃拟态 / 极光 / 3D 星海
   ------------------------------------------------------------
   tokens.css —— 只放设计令牌（颜色、玻璃参数、间距、字体、动效时长）。
   组件样式在 main.css。分开是为了让「配色改动」只改一个文件。

   配色来源：头像主色统计
     #9adfea  青色系平均色（饱和像素样本 1266 个）
     #707090 / #505070  深紫蓝（头发）
   在此基础上向极光光谱两端延伸出 violet / magenta。
   ============================================================ */

/* ---------- 1. 深色（默认，也是玻璃拟态的主场） ---------- */
:root {
  /* 底色：不用纯黑。纯黑上玻璃没有"底"可透，层次会塌掉 */
  --bg-0: #05060d;          /* 最深，页面基底 */
  --bg-1: #0a0d18;          /* 次深 */
  --bg-2: #111527;          /* 抬升面 */

  /* 极光光谱 */
  --au-cyan: #9adfea;
  --au-teal: #4fd6c8;
  --au-violet: #8a7df0;
  --au-indigo: #5b6bd6;
  --au-magenta: #d478e8;

  /* 主题强调色（交互态、链接、进度条） */
  --accent: #7fd4e8;
  --accent-2: #8a7df0;
  --accent-glow: rgba(127, 212, 232, .55);

  /* 文字：玻璃上不用纯白，纯白在深色玻璃上会"飘" */
  --ink: #e6eef6;
  --ink-soft: #b3c2d4;
  --ink-dim: #7d8ba0;
  --ink-faint: #5d6a7e;

  /* ---- 玻璃参数：整套设计的核心 ----
     玻璃感 = 半透明底 + 背景模糊 + 1px 亮边 + 顶部高光。
     缺任何一项都会退化成"半透明色块"。 */
  --glass-bg: rgba(255, 255, 255, .055);
  --glass-bg-hi: rgba(255, 255, 255, .095);   /* hover / 强调 */
  --glass-bg-lo: rgba(255, 255, 255, .032);   /* 层级更低的卡片 */
  --glass-blur: 22px;
  --glass-sat: 165%;                            /* 提高饱和度让透出的极光更艳 */
  --glass-border: rgba(255, 255, 255, .11);
  --glass-border-hi: rgba(255, 255, 255, .22);
  /* 顶部内高光：模拟玻璃边缘的反光，是"玻璃"和"塑料"的分界 */
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .16);
  --glass-sheen-soft: inset 0 1px 0 rgba(255, 255, 255, .09);
  /* 外阴影用深色而不是黑色，避免玻璃发脏 */
  --glass-shadow: 0 12px 34px -12px rgba(2, 6, 18, .72);
  --glass-shadow-hi: 0 22px 52px -16px rgba(2, 6, 18, .8);

  --hairline: rgba(255, 255, 255, .08);
  --hairline-soft: rgba(255, 255, 255, .045);

  /* 3D 星海与极光（供 canvas / JS 读取） */
  --star-a: 154, 223, 234;
  --star-b: 138, 125, 240;
  --nebula-1: 91, 107, 214;
  --nebula-2: 138, 125, 240;

  /* 排版 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-round: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 动效时长 —— 统一节奏，避免每处各写各的 */
  --t-fast: .18s;
  --t-mid: .32s;
  --t-slow: .58s;
  --t-xslow: 1.1s;
  --ease-out: cubic-bezier(.22, .8, .28, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* 轻微回弹 */

  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* 页面内容宽度 */
  --wrap: 1160px;

  color-scheme: dark;
}

/* ---------- 2. 浅色 ---------- */
/* 浅色下玻璃要"反过来"：用白色半透明 + 冷调阴影，
   边框改成深色低透明，否则白玻璃在白底上完全看不见。 */
:root[data-theme="light"] {
  --bg-0: #eef1f7;
  --bg-1: #e6eaf3;
  --bg-2: #f7f9fd;

  --accent: #2b9fb8;
  --accent-2: #6a5fd0;
  --accent-glow: rgba(43, 159, 184, .4);

  --ink: #1b2130;
  --ink-soft: #3f4859;
  --ink-dim: #5d6779;
  --ink-faint: #857f96;

  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-hi: rgba(255, 255, 255, .78);
  --glass-bg-lo: rgba(255, 255, 255, .42);
  --glass-blur: 20px;
  --glass-sat: 130%;
  --glass-border: rgba(255, 255, 255, .9);
  --glass-border-hi: rgba(255, 255, 255, 1);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .95);
  --glass-sheen-soft: inset 0 1px 0 rgba(255, 255, 255, .8);
  /* 浅色阴影用蓝紫调，比灰更有空气感 */
  --glass-shadow: 0 12px 30px -14px rgba(46, 60, 110, .3);
  --glass-shadow-hi: 0 22px 48px -18px rgba(46, 60, 110, .38);

  --hairline: rgba(28, 38, 70, .1);
  --hairline-soft: rgba(28, 38, 70, .055);

  --star-a: 43, 159, 184;
  --star-b: 106, 95, 208;
  --nebula-1: 120, 150, 235;
  --nebula-2: 168, 140, 240;

  color-scheme: light;
}

/* 跟随系统偏好（仅当用户没手动选过）。
   必须排在 [data-theme="light"] 之后，否则显式 light 压不住它。 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #eef1f7;
    --bg-1: #e6eaf3;
    --bg-2: #f7f9fd;

    --accent: #2b9fb8;
    --accent-2: #6a5fd0;
    --accent-glow: rgba(43, 159, 184, .4);

    --ink: #1b2130;
    --ink-soft: #3f4859;
    --ink-dim: #5d6779;
    --ink-faint: #857f96;

    --glass-bg: rgba(255, 255, 255, .58);
    --glass-bg-hi: rgba(255, 255, 255, .78);
    --glass-bg-lo: rgba(255, 255, 255, .42);
    --glass-blur: 20px;
    --glass-sat: 130%;
    --glass-border: rgba(255, 255, 255, .9);
    --glass-border-hi: rgba(255, 255, 255, 1);
    --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .95);
    --glass-sheen-soft: inset 0 1px 0 rgba(255, 255, 255, .8);
    --glass-shadow: 0 12px 30px -14px rgba(46, 60, 110, .3);
    --glass-shadow-hi: 0 22px 48px -18px rgba(46, 60, 110, .38);

    --hairline: rgba(28, 38, 70, .1);
    --hairline-soft: rgba(28, 38, 70, .055);

    --star-a: 43, 159, 184;
    --star-b: 106, 95, 208;
    --nebula-1: 120, 150, 235;
    --nebula-2: 168, 140, 240;

    color-scheme: light;
  }
}

/* ---------- 3. 无障碍：降低透明度与模糊 ---------- */
/* 有些用户开了「降低透明度」系统选项，玻璃模糊会让他们看不清内容。
   这里不做检测（浏览器没有可靠 API），而是在 reduced-motion 里
   一并把模糊降下来，作为保守处理。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-blur: 10px;
    --t-fast: .01ms;
    --t-mid: .01ms;
    --t-slow: .01ms;
    --t-xslow: .01ms;
  }
}