/*
 * Quota Switch 官网设计令牌
 *
 * 参考 craft.do/download 的设计系统（参数取自其公开样式表）：
 * 暖米色纸面、近黑墨色、常规字重的衬线大标题配紧字距、24px 圆角白卡片、
 * 多层极淡阴影、玻璃质感的主下载按钮、黑色胶囊按钮、虚线分隔的下载列表。
 * 只借鉴风格；字体、图片、图标都没有使用 Craft 的素材。
 * 和 App 内的设计系统（apps/QuotaSwitchMac/docs/DESIGN.md）同一套纸面与墨色。
 */
:root {
  color-scheme: light;

  /* 纸面与墨色 */
  --paper: #fcf9f7;
  --surface: #ffffff;
  --ink: #030302;
  --ink-700: rgba(3, 3, 2, 0.75);   /* 黑色按钮悬停 */
  --ink-600: rgba(3, 3, 2, 0.65);   /* 次要文字 */
  --ink-500: rgba(3, 3, 2, 0.5);    /* 辅助说明（只用于 15px 以上） */
  --ink-200: rgba(3, 3, 2, 0.12);   /* 虚线分隔 */
  --ink-100: rgba(3, 3, 2, 0.09);   /* 描边 */
  --ink-50: rgba(3, 3, 2, 0.04);    /* 填充 */
  --card-border: rgba(48, 52, 55, 0.12);

  /* 天空（首屏背景） */
  --sky-top: #bcdcf2;
  --sky-mid: #dcebf5;

  /* 产品数据色：和 App 一致，按工具固定 */
  --claude: #2a78d6;
  --codex: #eb6834;
  --gemini: #1baf7a;

  /* 粉彩色块：只做装饰底色 */
  --tint-cream: #fff3e7;
  --tint-sky: #e4f4fb;
  --tint-lilac: #f3e6f3;
  --tint-mint: #e2f3e5;
  --tint-peach: #fce8e0;

  /* 字体：衬线标题（拉丁用 Source Serif 4，中文用宋体），无衬线正文 */
  --font-serif: "Source Serif 4", ui-serif, "New York", "Songti SC", "Noto Serif SC", "STSong", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 字号：标题常规字重 + 负字距，随屏宽放大 */
  --h1: 36px;   --h1-track: -0.04em;
  --h2: 32px;   --h2-track: -0.02em;
  --h3: 30px;   --h3-track: -0.02em;
  --quote: 24px;
  --body: 17px;
  --small: 15px; --small-track: -0.02em;

  /* 间距：4 的倍数 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s30: 120px;
  --gutter: 16px;
  --max: 1160px;

  /* 圆角 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* 阴影：多层极淡，纸片微微浮起 */
  --shadow-block: 0 50px 40px rgba(0, 0, 0, 0.012), 0 50px 40px rgba(0, 0, 0, 0.02),
                  0 20px 40px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.08);
  --shadow-glass: 0 12px 12px 2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-glass-hover: 0 20px 25px 4px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --glass-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.59) 25%,
                    rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.84) 75%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --h1: 58px; --h2: 46px; --h3: 36px; --quote: 28px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --h1: 62px; --h2: 50px; --h3: 42px; --quote: 36px; --small: 16px; }
}