/* ============================================================================
   甲米三人行 · 2026 年 9 月 —— 设计令牌（Design Tokens）
   设计语言代号：Sticker Scrapbook（贴纸手帐）
   规范全文：docs/design-system/README.md

   这是全站唯一的取值来源。
   组件样式只准引用本文件的变量，不准在组件里写死
   颜色 / 圆角 / 描边 / 阴影 / 字号 / 间距 / 缓动。
   需要新数值时，先在这里加一个语义令牌，再去组件里用。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 展示字体
   Fraunces（SIL OFL）只服务拉丁字母与数字：Logo、倒计时、指标数值、日期。
   中文永远走系统字体栈——不为中文加载任何网络字体。
   字体文件获取方式见 docs/design-system/README.md「字体资产」。
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* 已子集化：拉丁字母、数字、฿、↗ 与常用标点。实际文件 20.6KB。
     unicode-range 与子集内容严格一致——超出范围的字符会自动回落到系统栈，
     不会触发一次无用的字体下载。 */
  unicode-range: U+20, U+25, U+28-29, U+2B-3B, U+41-5A, U+61-7A, U+B7, U+D7, U+E3F,
    U+2013-2014, U+2197;
}

:root {
  /* =========================================================================
     2. 原始色阶（Primitive）
     ⚠️ 组件不要直接用这一层。请用下面第 3 节的语义令牌。
     这一层只是为了让语义令牌有个可推导、可微调的来源。
     ========================================================================= */

  /* 沙 Sand —— 暖中性色，承担纸面、描边与文字 */
  --sand-50: #fffdf8;   /* 卡片纸白（比纯白更暖） */
  --sand-100: #fbf3e4;  /* 奶油沙滩，页面底色 */
  --sand-200: #f4e8d3;  /* 凹陷面、次级底 */
  --sand-300: #e6d6bb;  /* 分隔线 */
  --sand-400: #c7b498;  /* 禁用态 */
  --sand-500: #a3906f;
  --sand-600: #766653;  /* 次级文字。对页面 5.0:1、卡片 5.4:1、凹陷面 4.6:1，三种底都达标 AA */
  --sand-700: #5f5044;
  --sand-800: #40352c;
  --sand-900: #2a211a;  /* 暖墨黑——描边与正文的基准，绝不用纯黑 */

  /* 海 Sea —— 安达曼海绿松石，品牌主色 */
  --sea-50: #e4f4f0;
  --sea-100: #c4e8e1;
  --sea-200: #9bd7cc;
  --sea-300: #6fc4b7;
  --sea-500: #14907f;   /* 主色：图形、描边强调、进度。⚠️ 底色上放白字只有 3.9:1，主按钮请用 sea-600 */
  --sea-600: #0e7566;   /* 主色文字（对奶油底 5.1:1）。也是主按钮的底色 */
  --sea-700: #0a5b50;
  --sea-900: #06332c;

  /* 日落 Sunset —— 强调、待办、时间压力 */
  --sunset-50: #fdede3;
  --sunset-100: #fadbc8;
  --sunset-300: #f5a077;
  --sunset-500: #e9622f;
  --sunset-600: #bc4718;  /* 文字安全（对奶油底 4.7:1） */
  --sunset-700: #9e3d19;

  /* 芒果 Mango —— 高亮、涂鸦、featured。⚠️ 500 档禁止承载文字 */
  --mango-50: #fdf6e2;
  --mango-100: #fbeac0;
  --mango-300: #f9d876;
  --mango-500: #f5b72c;   /* 只做涂鸦、荧光笔、角标底。对任何底色都 < 2:1，永不承载文字 */
  --mango-700: #8f6404;   /* 需要文字时用这一档（对 mango-50 4.7:1） */

  /* 珊瑚 Coral —— 人物、高光时刻、影像 */
  --coral-50: #fcecee;
  --coral-100: #f9d6dc;
  --coral-300: #f4a5b2;
  --coral-500: #e8697f;
  --coral-700: #b13a4e;

  /* 泻湖 Lagoon —— 中性信息、候选态、天空 */
  --lagoon-50: #e8f1fb;
  --lagoon-100: #d0e3f7;
  --lagoon-300: #93bfea;
  --lagoon-500: #4f93d8;
  --lagoon-700: #2a639e;

  /* =========================================================================
     3. 语义令牌（Semantic）—— 组件只用这一层
     ========================================================================= */

  /* 纸面 ---------------------------------------------------------------- */
  --bg-page: var(--sand-100);        /* 页面底：奶油沙滩 */
  --bg-surface: var(--sand-50);      /* 卡片：暖白 */
  --bg-surface-sunk: var(--sand-200);/* 凹陷区、输入框、列表隔行 */
  --bg-surface-brand: var(--sea-50); /* 主色浸染卡（featured 指标） */
  --bg-surface-warm: var(--mango-50);/* 暖色浸染卡（高亮 / 提醒） */
  --bg-surface-pending: var(--sunset-50);
  --bg-surface-candidate: var(--lagoon-50);
  --bg-surface-highlight: var(--coral-50);

  /* 文字 ---------------------------------------------------------------- */
  --text-primary: var(--sand-900);
  --text-secondary: var(--sand-600);
  --text-brand: var(--sea-600);
  --text-accent: var(--sunset-600);
  --text-warm: var(--mango-700);
  --text-on-dark: var(--sand-50);
  --text-disabled: var(--sand-400);

  /* 描边 —— 本设计语言的骨架。描边永远是暖墨，不是灰 ------------------- */
  --stroke-hairline: 1px;   /* 列表分隔、表格线 */
  --stroke-base: 1.5px;     /* 卡片、chip、输入框 —— 默认值 */
  --stroke-bold: 2px;       /* 主按钮、焦点卡、hover 态 */
  --stroke-heavy: 2.5px;    /* Logo 容器、空/错状态的大图形 */

  --line-faint: color-mix(in srgb, var(--sand-900) 12%, transparent);   /* 卡片内部分隔 */
  --line-base: color-mix(in srgb, var(--sand-900) 32%, transparent);    /* 卡片 / chip 默认 */
  --line-strong: color-mix(in srgb, var(--sand-900) 88%, transparent);  /* 贴纸描边：主按钮、选中、焦点 */
  --line-brand: var(--sea-500);
  --line-accent: var(--sunset-500);
  --line-candidate: var(--lagoon-500);
  --line-highlight: var(--coral-500);
  --line-danger: var(--status-danger);

  /* 语义状态 ------------------------------------------------------------ */
  --status-done: var(--sea-600);      /* 已订、已完成 */
  --status-pending: var(--sunset-600);/* 待订、待办、逾期风险 */
  --status-candidate: var(--lagoon-700); /* 候选、未定 */
  --status-highlight: var(--coral-700);  /* 高光、人物 */
  --status-danger: #b4362f;

  /* 组件色 -------------------------------------------------------------- */
  --button-primary-bg: var(--sea-600);
  --button-primary-bg-hover: var(--sea-700);
  --button-primary-line: var(--sea-700);
  --button-primary-shadow: var(--sea-700);
  --avatar-riri-bg: var(--sea-100);
  --avatar-riri-line: var(--sea-500);
  --avatar-riri-text: var(--sea-700);
  --avatar-leilei-bg: var(--sunset-100);
  --avatar-leilei-line: var(--sunset-500);
  --avatar-leilei-text: var(--sunset-700);
  --avatar-zhuzhu-bg: var(--coral-100);
  --avatar-zhuzhu-line: var(--coral-500);
  --avatar-zhuzhu-text: var(--coral-700);
  --grain-dot-a: color-mix(in srgb, var(--sand-900) 4%, transparent);
  --grain-dot-b: color-mix(in srgb, var(--sand-800) 3%, transparent);
  --skeleton-shine: color-mix(in srgb, var(--sand-50) 70%, transparent);
  --highlight-wash: color-mix(in srgb, var(--mango-500) 55%, transparent);

  /* 圆角 —— 只有这五档，不允许出现第六个数值 --------------------------- */
  --radius-sm: 8px;      /* 小标记、荧光块 */
  --radius-md: 12px;     /* 插画槽、内嵌小卡 */
  --radius-lg: 18px;     /* 标准卡片 */
  --radius-xl: 24px;     /* 区块容器、hero */
  --radius-pill: 999px;  /* chip、按钮、头像 */

  /* 阴影 ---------------------------------------------------------------- */
  /* soft：环境阴影，卡片默认。贴纸感来自描边，不是靠加重阴影 */
  --shadow-soft:
    0 1px 2px color-mix(in srgb, var(--sand-900) 5%, transparent),
    0 8px 24px color-mix(in srgb, var(--sand-800) 7%, transparent);
  --shadow-lift:
    0 2px 4px color-mix(in srgb, var(--sand-900) 6%, transparent),
    0 14px 32px color-mix(in srgb, var(--sand-800) 11%, transparent);
  /* sticker：实心偏移，给需要"贴上去"的元素——主按钮、被选中的 chip */
  --shadow-sticker-sm: 2px 2px 0 var(--line-strong);
  --shadow-sticker-md: 3px 4px 0 var(--line-strong);
  --shadow-sticker-brand: 3px 4px 0 var(--sea-700);

  /* 字体族 -------------------------------------------------------------- */
  /* ⚠️ --font-display 的子集只含 600 一个字重。给它写 700 会触发浏览器合成假粗，
     字形会糊。展示层的层级靠字号拉，不靠字重。 */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Songti SC", serif;
  --font-sans: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC",
    system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* 字号阶梯 —— 固定 px，Notion Embed 里比 rem 稳定 --------------------- */
  --text-2xs: 11px;   /* 角标、脚注 */
  --text-xs: 12px;    /* 元信息、kicker */
  --text-sm: 13px;    /* 列表项、按钮 */
  --text-base: 15px;  /* 正文 */
  --text-md: 17px;    /* 卡片小标题 */
  --text-lg: 21px;    /* 区块标题 */
  --text-xl: 26px;    /* 页面主标题 */
  --display-sm: clamp(30px, 3.4vw, 40px);   /* 指标数值 */
  --display-currency: clamp(26px, 3vw, 34px); /* 多位金额 */
  --display-md: clamp(40px, 5vw, 56px);
  --display-lg: clamp(68px, 8.5vw, 100px);  /* 倒计时 */

  /* 字重 —— 中文靠字重拉层级，拉丁靠 display 字体拉层级 ----------------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* 行高与字距 ---------------------------------------------------------- */
  --leading-tight: 1.15;   /* 展示数字 */
  --leading-snug: 1.32;    /* 标题 */
  --leading-normal: 1.6;   /* 正文（中文要给足） */
  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-wide: 0.08em;  /* 全大写 kicker */

  /* 间距 —— 4px 基准 ---------------------------------------------------- */
  --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;
  --space-16: 64px;

  --gap-grid: var(--space-4);      /* 卡片之间 */
  --pad-card: var(--space-5);      /* 卡片内边距（桌面） */
  --pad-card-lg: var(--space-6);   /* hero / 区块容器 */

  /* 布局 ---------------------------------------------------------------- */
  --shell-max: 1120px;
  --shell-pad: var(--space-6);

  /* 组件尺寸与文字测量 -------------------------------------------------- */
  --page-min-width: 320px;
  --hero-min-height: 320px;
  --stat-min-height: 152px;
  --focus-min-height: 168px;
  --state-min-height: 420px;
  --tap-size: 40px;
  --tap-size-mobile: 44px;
  --avatar-size: 40px;
  --progress-size: 8px;
  --slot-hero-width: 280px;
  --slot-hero-height: 220px;
  --slot-hero-tablet-width: 140px;
  --slot-hero-tablet-height: 110px;
  --slot-badge-size: 48px;
  --slot-state-size: 200px;
  --route-dash-width: 30px;
  --route-dash-short-width: 18px;
  --corner-doodle-size: 180px;
  --measure-hero-title: 15ch;
  --measure-hero-title-tablet: 11ch;
  --measure-hero-copy: 32ch;
  --measure-hero-copy-compact: 23ch;
  --measure-hero-copy-tablet: 16ch;
  --measure-state-copy: 34ch;
  --measure-section-title: 30ch;
  --grain-size-a: 11px 13px;
  --grain-size-b: 17px 19px;
  --grain-dot-a-size: 1.2px;
  --grain-dot-b-size: 1.1px;

  /* 组件位置与反馈 ------------------------------------------------------ */
  --corner-doodle-top: -46px;
  --corner-doodle-left: -52px;
  --corner-doodle-right: -58px;
  --corner-doodle-bottom: -40px;
  --motion-lift: -2px;
  --motion-enter: 6px;
  --motion-press-sm: 1px;
  --motion-press-x: 3px;
  --motion-press-y: 4px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --rotate-stamp: -0.8deg;
  --rotate-route-a: -2deg;
  --rotate-route-b: 3deg;
  --rotate-corner-tl: -12deg;
  --rotate-corner-br: 158deg;

  /* 动效 ---------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --dur-skeleton: 1600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* 贴纸弹跳，只给交互反馈 */

  /* 涂鸦（手绘装饰）------------------------------------------------------ */
  --doodle-ink: var(--mango-500);        /* 默认涂鸦色：芒果黄 */
  --doodle-ink-alt: var(--sea-300);
  --doodle-stroke: 3px;                  /* 涂鸦线比 UI 描边粗，才像笔触 */
  --doodle-opacity: 1;
  --grain-opacity: 0.5;                  /* 纸张颗粒 */
}

/* ============================================================================
   4. 深色模式
   奶油底的夜间版本是「暖褐夜色」，不是冷灰。
   点缀色统一提亮一档，描边由暖墨翻转为暖白。

   ⚠️ 下面两个块的内容必须**逐字一致**，只有选择器不同：
      · 前者跟随系统偏好，但让 data-theme="light" 能强制压回浅色；
      · 后者让 data-theme="dark" 在浅色系统上也能强制深色。
      CSS 无法在 @media 内外共享一条规则，所以只能重复。改一处就要改另一处。
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --sand-50: #2b241d;    /* 卡片 */
    --sand-100: #1c1713;   /* 页面底 */
    --sand-200: #241e18;
    --sand-300: #3a3128;
    --sand-400: #6b5c4c;
    --sand-600: #a8968a;   /* 次级文字（对夜色底 5.1:1） */
    --sand-700: #c9bcae;
    --sand-900: #f6ecdb;   /* 文字与描边翻转为暖白 */

    --sea-50: #12312c;
    --sea-100: #17423a;
    --sea-500: #3fb8a3;
    --sea-600: #6ed3bd;
    --sea-700: #8fe0cc;

    --sunset-50: #3a2318;
    --sunset-100: #4d2e1e;
    --sunset-500: #f5834f;
    --sunset-600: #ffa87a;
    --sunset-700: #ffc4a1;

    --mango-50: #33280f;
    --mango-100: #453516;
    --mango-500: #f7c556;
    --mango-700: #ffd77e;

    --coral-50: #3a1f25;
    --coral-100: #4d2831;
    --coral-500: #f28c9e;
    --coral-700: #ffb0bd;

    --lagoon-50: #14283a;
    --lagoon-100: #1c364d;
    --lagoon-500: #79b3e8;
    --lagoon-700: #a3cdf2;

    --line-faint: color-mix(in srgb, var(--sand-900) 14%, transparent);
    --line-base: color-mix(in srgb, var(--sand-900) 26%, transparent);
    --line-strong: color-mix(in srgb, var(--sand-900) 72%, transparent);

    --shadow-soft:
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lift:
      0 2px 4px rgba(0, 0, 0, 0.34),
      0 14px 32px rgba(0, 0, 0, 0.42);

    --grain-opacity: 0.28;
    --doodle-opacity: 0.78;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --sand-50: #2b241d;    /* 卡片 */
  --sand-100: #1c1713;   /* 页面底 */
  --sand-200: #241e18;
  --sand-300: #3a3128;
  --sand-400: #6b5c4c;
  --sand-600: #a8968a;   /* 次级文字（对夜色底 5.1:1） */
  --sand-700: #c9bcae;
  --sand-900: #f6ecdb;   /* 文字与描边翻转为暖白 */

  --sea-50: #12312c;
  --sea-100: #17423a;
  --sea-500: #3fb8a3;
  --sea-600: #6ed3bd;
  --sea-700: #8fe0cc;

  --sunset-50: #3a2318;
  --sunset-100: #4d2e1e;
  --sunset-500: #f5834f;
  --sunset-600: #ffa87a;
  --sunset-700: #ffc4a1;

  --mango-50: #33280f;
  --mango-100: #453516;
  --mango-500: #f7c556;
  --mango-700: #ffd77e;

  --coral-50: #3a1f25;
  --coral-100: #4d2831;
  --coral-500: #f28c9e;
  --coral-700: #ffb0bd;

  --lagoon-50: #14283a;
  --lagoon-100: #1c364d;
  --lagoon-500: #79b3e8;
  --lagoon-700: #a3cdf2;

  --line-faint: color-mix(in srgb, var(--sand-900) 14%, transparent);
  --line-base: color-mix(in srgb, var(--sand-900) 26%, transparent);
  --line-strong: color-mix(in srgb, var(--sand-900) 72%, transparent);

  --shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lift:
    0 2px 4px rgba(0, 0, 0, 0.34),
    0 14px 32px rgba(0, 0, 0, 0.42);

  --grain-opacity: 0.28;
  --doodle-opacity: 0.78;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ============================================================================
   5. 降级与偏好
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-base: color-mix(in srgb, var(--sand-900) 46%, transparent);
    --text-secondary: var(--sand-700);
    --stroke-base: 2px;
  }
}