/* theme.css — 设计令牌 v1（哎小呜Awu）
 *
 * 配色全部取自头像，不凭空调色：
 *   · 珊瑚粉（coral） —— 头发与和服的主色，作为站点强调色；
 *   · 冰蓝（ice）     —— 头顶那对角，只用在 LIVE / 状态这类"信号"上，克制；
 *   · 暖金（gold）    —— 白色花簪的花蕊，做点缀与高亮笔；
 *   · 米纸（paper）   —— 底色，保留"纸 + 玻璃卡"的杂志感。
 *
 * 字体分三档：Fraunces（拉丁与数字）、思源宋体（中文标题）、HarmonyOS Sans（正文）；
 * 阴影是"暖褐 + 双层"（近处细影 + 远处大影），卡片才有厚度。
 */
@layer reset, base, components, page;

:root {
  /* ── 表面：米纸 ───────────────────────────────────── */
  --paper-50:  #fffaf5;
  --paper-100: #fdf4ec;
  --paper-200: #f8ebe0;
  --paper-300: #f1ddcd;

  --bg:        var(--paper-100);
  --bg-deep:   #f6e5d6;
  --panel:     var(--paper-50);
  --panel-2:   #fdf2e8;
  --panel-3:   #f8e9da;
  --border:    #ecd8c6;
  --border-soft: #f3e4d6;

  /* 兼容别名：早期样式用的是 --cream-*，全部指向米纸 */
  --cream-50:  var(--paper-50);
  --cream-100: var(--paper-100);
  --cream-200: var(--paper-200);
  --cream-300: var(--paper-300);

  /* ── 文字：偏暖的深可可色，不用纯黑 ───────────────── */
  --ink-900:   #2f211c;
  --ink-700:   #5c423a;
  --ink-500:   #8e7368;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  /* ── 强调色：珊瑚（头发） ─────────────────────────── */
  --coral-700: #9c3b27;
  --coral-600: #b8482f;
  --coral-500: #d4664a;
  --coral-300: #f1b6a2;
  --coral-100: #fce8e0;

  /* ── 信号色：冰蓝（角） ───────────────────────────── */
  --ice-700:   #2e6b94;
  --ice-600:   #3f86b4;
  --ice-500:   #5da7ce;
  --ice-300:   #a9d5ee;
  --ice-100:   #e8f5fd;

  /* ── 点缀色：暖金（花蕊） ─────────────────────────── */
  --gold-600:  #a3742a;
  --gold-500:  #c9913c;
  --gold-300:  #edd096;
  --gold-100:  #fbf0d8;

  --blush-500: #e8a49b;
  --blush-100: #fcebe7;

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

  --gold:     var(--gold-500);
  --blush:    var(--blush-500);
  --coral-400: color-mix(in srgb, var(--coral-500) 65%, var(--coral-300));

  --ok:       #4d7f5b;
  --warn:     #a9762c;
  --danger:   #b0473a;

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

  /* ── 阴影：近细远软，两层叠加才有"浮起来"的感觉 ───── */
  --shadow-xs: 0 1px 2px rgba(96, 62, 44, 0.07);
  --shadow-sm: 0 1px 2px rgba(96, 62, 44, 0.06), 0 6px 14px -8px rgba(96, 62, 44, 0.24);
  --shadow:    0 2px 4px rgba(96, 62, 44, 0.06), 0 18px 38px -22px rgba(96, 62, 44, 0.36);
  --shadow-lg: 0 2px 6px rgba(96, 62, 44, 0.06), 0 36px 70px -38px rgba(96, 62, 44, 0.46);
  --shadow-glow: 0 24px 60px -30px rgba(184, 72, 47, 0.5);

  /* ── 字体 ─────────────────────────────────────────── */
  --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"] {
  --paper-50:  #1b1310;
  --paper-100: #17100e;
  --paper-200: #211814;
  --paper-300: #2b1f1a;

  --bg:        #17100e;
  --bg-deep:   #100b09;
  --panel:     #201612;
  --panel-2:   #261b16;
  --panel-3:   #2e211a;
  --border:    #3c2b23;
  --border-soft: #33241d;

  --ink-900:   #f7ede3;
  --ink-700:   #d2bcae;
  --ink-500:   #9d8377;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  --coral-700: #ffbda8;
  --coral-600: #f79b81;
  --coral-500: #e98a6f;
  --coral-300: #6d3527;
  --coral-100: #2d1a14;

  --ice-700:   #badff6;
  --ice-600:   #9aceec;
  --ice-500:   #82bbdc;
  --ice-300:   #2f4d61;
  --ice-100:   #16252f;

  --gold-600:  #ecca8c;
  --gold-500:  #deb475;
  --gold-300:  #6f5628;
  --gold-100:  #2c2214;

  --blush-500: #e3a89e;
  --blush-100: #2f1f1b;

  --accent:      var(--coral-600);
  --accent-deep: var(--coral-500);
  --accent-ink:  #1c0f0a;
  --accent-soft: var(--coral-100);
  --accent-line: var(--coral-300);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 6px 14px -8px rgba(0, 0, 0, 0.62);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.42), 0 18px 38px -22px rgba(0, 0, 0, 0.76);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.46), 0 36px 70px -38px rgba(0, 0, 0, 0.86);
  --shadow-glow: 0 24px 60px -30px rgba(249, 155, 129, 0.32);

  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────
   组件令牌兼容层
   本站（Awu）的主题色族是 coral / ice / cream；
   iris 版本的组件 CSS 仍在引用 sage / iris 这组令牌名。
   这里把缺失的名字映射到本站已有色阶，避免按钮渐变失效变透明。
   ───────────────────────────────────────────────────────────── */
:root {
  --sage-100: var(--coral-100);
  --sage-300: var(--coral-300);
  --sage-400: var(--coral-400);
  --sage-500: var(--coral-500);
  --sage-600: var(--coral-600);
  --sage-700: var(--coral-700);
  --iris-300: var(--ice-300);
  --iris-500: var(--ice-500);
  --iris-600: var(--ice-600);
  --iris-700: var(--ice-700);
  --aurora-100: var(--cream-100);
  --aurora-500: var(--accent-deep);
  --blush-soft: var(--blush-100);
}