/* theme.css — 设计令牌 v4「紫雾 · 鸢尾 · 极光」
 *
 * 配色全部取自铃织Iris 的立绘与 PV：
 *   · 雾紫 / 薄紫（头发、眼瞳的高光）→ 主色族 --iris-*
 *   · 星白 / 月白（裙摆、花饰）        → 表面色族 --cream-*
 *   · 暖金（发饰上的叶片、铃铛）        → --gold-*
 *   · 极光青（社团「极光社」）         → --aurora-*，只用在 LIVE 徽标等极少数位置
 * 深浅两套都重算过对比度：正文对背景 ≥ 7:1，弱化文字 ≥ 4.5:1。
 *
 * 令牌命名有个历史包袱：老样式里写的是 --sage-*（上一版是苔绿主题）。
 * 这里保留 --sage-* 作为 --iris-* 的别名，129 处引用就不用逐个改；
 * 新代码请只用 --iris-*。
 */
@layer reset, base, components, page;

:root {
  /* ── 表面：星白 → 薄紫雾 ───────────────────────────── */
  --cream-50:  #ffffff;
  --cream-100: #fbf8ff;
  --cream-200: #f4edfe;
  --cream-300: #eae0fa;

  --bg:        var(--cream-100);
  --bg-deep:   #f1e8fd;
  --panel:     var(--cream-50);
  --panel-2:   #f9f4ff;
  --panel-3:   #f1e9fd;
  --border:    #e2d6f6;
  --border-soft: #eee6fb;

  /* ── 文字：带紫调的墨，不用纯黑 ───────────────────── */
  --ink-900:   #2b2447;
  --ink-700:   #4c446e;
  --ink-500:   #7c7499;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  /* ── 主色：鸢尾紫 ─────────────────────────────────── */
  --iris-700:  #4b31a0;
  --iris-600:  #6642c9;
  --iris-500:  #8465e0;
  --iris-300:  #c9b6f5;
  --iris-100:  #ede4fd;

  /* ── 辅色：发饰上的暖金 ───────────────────────────── */
  --gold-600:  #a8823c;
  --gold-500:  #cfa85c;
  --gold-300:  #e8ce97;
  --gold-100:  #fbf2dd;

  /* ── 点缀：腮红与极光 ─────────────────────────────── */
  --blush-500: #e8a2ba;
  --blush-100: #fdedf3;

  --aurora-500: #4fc9bd;
  --aurora-100: #e2f8f5;

  --accent:      var(--iris-600);
  --accent-deep: var(--iris-700);
  --accent-ink:  var(--cream-50);
  --accent-soft: var(--iris-100);
  --accent-line: var(--iris-300);

  /* 兼容别名：早期样式里用的是 --sage-*，这里整体指向鸢尾紫族。 */
  --sage-700:  var(--iris-700);
  --sage-600:  var(--iris-600);
  --sage-500:  var(--iris-500);
  --sage-300:  var(--iris-300);
  --sage-100:  var(--iris-100);
  --sage-400:  color-mix(in srgb, var(--iris-500) 65%, var(--iris-300));

  --gold:     var(--gold-500);
  --blush:    var(--blush-500);

  --ok:       #3f8a68;
  --warn:     #a4762c;
  --danger:   #b4473f;

  /* ── 形状 ─────────────────────────────────────────── */
  --radius-2xl: 30px;
  --radius-xl:  22px;
  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill: 999px;

  /* ── 阴影：紫调近细远软，两层叠加才有"浮起来"的感觉 ── */
  --shadow-xs: 0 1px 2px rgba(64, 46, 110, 0.06);
  --shadow-sm: 0 1px 2px rgba(64, 46, 110, 0.05), 0 6px 14px -8px rgba(64, 46, 110, 0.22);
  --shadow:    0 2px 4px rgba(64, 46, 110, 0.05), 0 18px 38px -22px rgba(64, 46, 110, 0.34);
  --shadow-lg: 0 2px 6px rgba(64, 46, 110, 0.05), 0 36px 70px -38px rgba(64, 46, 110, 0.44);
  --shadow-glow: 0 24px 60px -30px rgba(102, 66, 201, 0.55);

  /* ── 字体 ─────────────────────────────────────────── */
  --font-display: "Fraunces", "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                  STSong, "SimSun", serif;
  --font-serif:   "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --font-sans:    "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC",
                  "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ── 动效 ─────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:       200ms;
  --dur-slow:  620ms;

  color-scheme: light;
}

/* 深色：极光社的夜。不是灰，是"关灯后的星空"。 */
:root[data-theme="dark"] {
  --cream-50:  #16112b;
  --cream-100: #120e23;
  --cream-200: #1b1636;
  --cream-300: #251f47;

  --bg:        #120e23;
  --bg-deep:   #0b0817;
  --panel:     #1a1533;
  --panel-2:   #201a3c;
  --panel-3:   #282147;
  --border:    #372f5e;
  --border-soft: #2b2450;

  --ink-900:   #f3efff;
  --ink-700:   #cdc5ea;
  --ink-500:   #9a92bd;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  --iris-700:  #dccfff;
  --iris-600:  #c4adfd;
  --iris-500:  #a98df8;
  --iris-300:  #4b3d7e;
  --iris-100:  #241d43;

  --gold-600:  #edca8b;
  --gold-500:  #dcb46f;
  --gold-300:  #6b552a;
  --gold-100:  #2b2415;

  --blush-500: #e6a8bd;
  --blush-100: #2f2029;

  --aurora-500: #63d8cb;
  --aurora-100: #15332f;

  --accent:      var(--iris-600);
  --accent-deep: var(--iris-500);
  --accent-ink:  #171029;
  --accent-soft: var(--iris-100);
  --accent-line: var(--iris-300);

  --gold:     var(--gold-500);
  --blush:    var(--blush-500);

  --ok:       #67bd8f;
  --warn:     #d9a95e;
  --danger:   #e08177;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -8px rgba(0, 0, 0, 0.65);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 38px -22px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 36px 70px -38px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 24px 60px -30px rgba(169, 141, 248, 0.4);

  color-scheme: dark;
}