/* ============================================================
   tokens —— 设计令牌（Notion 设计系统 · 明 / 暗双主题）
   要点：暖中性色（黄褐底韵）、耳语级 1px 边框、多层超低透明度阴影、
        Notion Blue 唯一饱和色、完成态用绿色与主操作蓝明确区分
   主题切换：html[data-theme="dark"] 覆盖，默认跟随系统（见页面内联脚本）
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 基础色板（暖中性，禁用蓝灰） ---------- */
  --primary: #0075DE;            /* Notion Blue：唯一饱和色，仅用于 CTA/交互 */
  --primary-hover: #005BAB;      /* 按压/悬停加深 */
  --primary-emphasis: #097FE8;   /* 浅色底上的强调文字（badge 文字色） */
  --primary-soft: #F2F9FF;       /* 淡蓝 pill 底 */
  --bg: #F6F5F4;                 /* 暖白画布（黄褐底韵） */
  --card: #FFFFFF;
  --text-1: rgba(0, 0, 0, .95);  /* 近黑，非纯黑 */
  --text-2: #615D59;             /* 暖灰 500 */
  --text-3: #A39E98;             /* 暖灰 300 */
  --border: rgba(0, 0, 0, .1);   /* 耳语边框 */
  --border-strong: #DDDDDD;      /* 输入框描边 */
  --border-soft: rgba(0, 0, 0, .05);
  --danger: #E03E3E;
  --danger-hover: #C43333;
  --danger-emphasis: #D44C47;
  --danger-soft: #FDEBEC;
  --star: #DD5B00;               /* 今日重点：Notion 橙 */
  --success: #1AAE39;            /* 完成态：确认绿（与操作蓝明确区分） */
  --success-soft: #EAF7EC;
  --scrim: rgba(15, 15, 15, .5);
  --topbar-bg: rgba(255, 255, 255, .92);

  /* ---------- 派生色（由基础色混合，勿手写 rgba） ---------- */
  --ring: color-mix(in srgb, var(--primary) 22%, transparent);
  --tint-bar: color-mix(in srgb, var(--primary) 18%, transparent);
  --tint-chip: color-mix(in srgb, var(--primary) 25%, transparent);
  --tint-badge: color-mix(in srgb, var(--primary) 10%, transparent);
  --tint-outline: color-mix(in srgb, var(--primary) 20%, transparent);
  --tint-page: color-mix(in srgb, var(--primary) 8%, transparent);
  --tint-danger: color-mix(in srgb, var(--danger) 15%, transparent);
  --tint-success: color-mix(in srgb, var(--success) 10%, transparent);

  /* ---------- 阴影（多层堆叠，单层透明度 ≤ .05） ---------- */
  --shadow-card: rgba(0, 0, 0, .04) 0 4px 18px, rgba(0, 0, 0, .027) 0 2.025px 7.85px,
                 rgba(0, 0, 0, .02) 0 .8px 2.93px, rgba(0, 0, 0, .01) 0 .175px 1.04px;
  --shadow-pop: rgba(0, 0, 0, .01) 0 1px 3px, rgba(0, 0, 0, .02) 0 3px 7px,
                rgba(0, 0, 0, .02) 0 7px 15px, rgba(0, 0, 0, .04) 0 14px 28px,
                rgba(0, 0, 0, .05) 0 23px 52px;
  --shadow-primary: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
  --shadow-primary-hover: 0 6px 20px color-mix(in srgb, var(--primary) 36%, transparent);

  /* ---------- toast ---------- */
  --toast-bg: #31302E;           /* 暖深灰 */
  --toast-fg: #FFFFFF;

  /* ---------- 字体（Inter 体系 + 中文字回退） ---------- */
  --font: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, system-ui,
          "Segoe UI", sans-serif;
  --fs-title: 18px;
  --fs-sub: 15px;
  --fs-body: 14px;
  --fs-aux: 12px;
  --lh: 1.5;

  /* ---------- 间距刻度 ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;

  /* ---------- 圆角（Notion 刻度：按钮/输入 4px，卡片 12px） ---------- */
  --ctrl-h: 32px;
  --radius-card: 12px;
  --radius-ctrl: 4px;
}

/* ---------- 跨页切换（Chrome 126+ / Safari 18.2+） ----------
   三页顶栏已同款同位：开启跨文档 View Transition 后，
   便签墙 / 我的看板 / 总看板 之间的整页跳转会变成平滑过渡
   （顶栏相同位置元素直接形变衔接，不再是白屏重开），观感接近单页应用。
   不支持的浏览器（如 Firefox）自动忽略本规则，退回普通跳转，无任何副作用。 */
@view-transition {
  navigation: auto;
}

/* ---------- 暗色主题（树荫：树枝 + 树叶） ----------
   亮色那边是"暖木桌面"，暗色这边是同一套材质换一种光线 —— 树荫。
   所以：底色是深绿而不是中性黑灰，纸面偏绿，连中性色也往绿里偏一点点；
   纯灰的暗色放在暖木旁边会像"另一套系统"，而不是同一个房间关了灯。 */
[data-theme="dark"] {
  color-scheme: dark;

  /* 强调色仍是蓝：主色一旦改成叶绿，就和「已完成」的绿撞在一起了
     （tokens 的要求是这两者必须明确区分，见上面 --success 的注释）。 */
  --primary: #2383E2;
  --primary-hover: #1A6FC4;
  --primary-emphasis: #62AEF0;
  --primary-soft: #14301F;       /* 淡底 pill：树荫下的一块浅底 */
  --bg: #14211A;                 /* 树荫深处（比中性黑亮一档、绿味再足一点，
                                    否则在偏暗的屏上会被读成"纯黑"） */
  --card: #1D2A22;
  --text-1: rgba(238, 246, 238, .95);
  --text-2: #9FAD9E;
  --text-3: #6E7C6D;
  --border: rgba(196, 224, 198, .13);
  --border-strong: #48573F;      /* 树皮色：输入框描边 */
  --border-soft: rgba(196, 224, 198, .07);
  --danger: #E05252;
  --danger-hover: #C74444;
  --danger-emphasis: #FF8A7A;
  --danger-soft: #3A1F1C;
  --star: #E8762C;
  --success: #4DBB63;
  --success-soft: #16301C;

  --shadow-card: rgba(0, 0, 0, .3) 0 4px 18px, rgba(0, 0, 0, .2) 0 2px 8px;
  --shadow-pop: rgba(0, 0, 0, .35) 0 1px 3px, rgba(0, 0, 0, .4) 0 7px 15px,
                rgba(0, 0, 0, .45) 0 14px 28px, rgba(0, 0, 0, .5) 0 23px 52px;

  --toast-bg: #223128;
  --toast-fg: #F1F7F1;

  --scrim: rgba(8, 14, 10, .62);
  --topbar-bg: rgba(20, 33, 26, .92);
}