/* AppStore theme — design tokens. See docs/appstore-theme-方案v1.md §1.2, docs/p1.7-light-and-motion.md */

/* Registered as a <number> so transitioning it (page-glow's ambient hue chase,
   base.css) actually interpolates smoothly instead of snapping — an
   unregistered custom property is an opaque token stream and can't animate.
   Initial value matches hero slide 1's hue so there's no jump on first paint. */
@property --page-h {
  syntax: '<number>';
  inherits: true;
  initial-value: 205;
}

:root {
  /* 颜色 - 浅色(默认) */
  --bg-page: #F5F5F7;          /* iOS systemGroupedBackground */
  --bg-elevated: #FFFFFF;
  --text-primary: #000000;
  --text-secondary: #6E6E73;
  --text-tertiary: #8E8E93;
  --tint: #007AFF;             /* 链接/激活态,可在后台改 */
  --glass-tint: #FFFFFF;
  --separator: rgb(60 60 67 / .10);
  --pill-bg: #EEEEEF;
  --chip-bg: rgb(120 120 128 / .12);
  --row-hover: rgb(0 0 0 / .03);
  --row-active: rgb(0 0 0 / .06);

  /* 圆角(App Store 的灵魂参数) */
  --radius-card: 20px;         /* story 大卡 */
  --radius-row: 14px;          /* 应用行卡/播放器 */
  --radius-chip: 999px;        /* 芯片/按钮胶囊 */
  --radius-icon: 22.37%;       /* app 图标圆角比例(superellipse 近似) */

  /* 字体:无衬线,系统栈,不引外部字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "PingFang SC", "PingFang TC", "Segoe UI",
             "Noto Sans SC", "Microsoft YaHei", sans-serif;
  /* p3.35 B2:代码框等宽字体——没在后台设置自定义字体时的系统兜底栈,
     header.php 设了自定义代码字体时会用同名变量整体覆盖这一份默认值。 */
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 大标题略收字距,模拟 SF Pro Display */
  --tracking-title: -0.02em;

  /* 字号阶梯(对应 iOS Dynamic Type 常用档) */
  --fs-largetitle: 34px;  --fs-title1: 28px;  --fs-title2: 22px;
  --fs-headline: 17px;    --fs-body: 17px;    --fs-subhead: 15px;
  --fs-footnote: 13px;    --fs-caption: 12px;

  /* 间距 */
  --space-page: 20px;          /* 移动端页边距 */
  --space-section: 32px;

  /* 动画 */
  --ease-spring: cubic-bezier(.32,.72,0,1);   /* 展开/收起主曲线 */
  --dur-expand: 480ms;
  --dur-collapse: 400ms;
  /* p3.26:全站微交互统一缓动——hover/常规过渡用这条(不是展开/收起那种
     大动作用的 --ease-spring),别各处各写各的或者压根没有过渡。 */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-hover: 220ms;

  /* p3.26:卡片阴影分层——静态浅、hover 深,全站卡片(歌单卡/story
     卡/分类集锦卡等)统一用这一组,不再有的卡有阴影有的没有。深色模式
     下同一批 token 在下面 [data-theme="dark"] 里改写成更深的黑(浅色阴
     影在深色背景上几乎不可见,不能直接复用同一个数值)。 */
  --shadow-card: 0 4px 12px rgb(0 0 0 / .12);
  --shadow-card-hover: 0 10px 24px rgb(0 0 0 / .18);

  /* cover v3 色相表(p1.6 §1,单色相纪律,按 cid % 8 取) */
  --hue-1: 18;   /* 橙 */
  --hue-2: 205;  /* 青 */
  --hue-3: 152;  /* 绿 */
  --hue-4: 265;  /* 紫 */
  --hue-5: 340;  /* 玫红 */
  --hue-6: 45;   /* 金 */
  --hue-7: 190;  /* 蓝绿 */
  --hue-8: 225;  /* 蓝 */

  /* cover 噪点纹理,零请求 */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 分层高度(容器宽度断点) */
  --breakpoint-desktop: 700px;
  --container-desktop: 980px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #0A0A0C;  --bg-elevated: #1C1C1E;
    --text-primary: #FFFFFF;  --text-secondary: #98989E;
    --glass-tint: #2C2C2E;  --separator: rgb(84 84 88 / .35);
    --pill-bg: rgb(120 120 128 / .24);
    --chip-bg: rgb(120 120 128 / .18);
    --row-hover: rgb(255 255 255 / .04);
    --row-active: rgb(255 255 255 / .08);
    --shadow-card: 0 4px 14px rgb(0 0 0 / .45);
    --shadow-card-hover: 0 12px 28px rgb(0 0 0 / .6);
  }
}

/* manual override (dev preview theme toggle) — wins over prefers-color-scheme.
   .cover's own hue formula (base.css) keys off this same [data-theme] attribute
   directly, not these tokens, so app.js sets the attribute explicitly on load
   rather than leaving it unset when the OS is already in light mode. */
:root[data-theme="dark"] {
  --bg-page: #0A0A0C;  --bg-elevated: #1C1C1E;
  --text-primary: #FFFFFF;  --text-secondary: #98989E;
  --glass-tint: #2C2C2E;  --separator: rgb(84 84 88 / .35);
  --pill-bg: rgb(120 120 128 / .24);
  --chip-bg: rgb(120 120 128 / .18);
  --row-hover: rgb(255 255 255 / .04);
  --row-active: rgb(255 255 255 / .08);
  --shadow-card: 0 4px 14px rgb(0 0 0 / .45);
  --shadow-card-hover: 0 12px 28px rgb(0 0 0 / .6);
}
:root[data-theme="light"] {
  --bg-page: #F5F5F7;  --bg-elevated: #FFFFFF;
  --text-primary: #000000;  --text-secondary: #6E6E73;
  --glass-tint: #FFFFFF;  --separator: rgb(60 60 67 / .10);
  --pill-bg: #EEEEEF;
  --chip-bg: rgb(120 120 128 / .12); /* chip light mode is white+shadow, not this — see components.css */
  --row-hover: rgb(0 0 0 / .03);
  --row-active: rgb(0 0 0 / .06);
  --shadow-card: 0 4px 12px rgb(0 0 0 / .12);
  --shadow-card-hover: 0 10px 24px rgb(0 0 0 / .18);
}