/* 星屿光年设计语言 · 变量层（/resources/brand/tokens.css）
   所有站、所有后台页共用：先引这一份，再引 components.css，最后才是页面自己的版面。页面只改一个色相 --h，强调色全由它算。
   为什么是这些数值、怎么接一张新页：见同目录 README.md。 */

/* 西文与数字用自托管的 Geist；中文用本机字体（苹果设备苹方、装了思源黑体的电脑用思源、其余 Windows 用微软雅黑），
   不下载中文字体：七千字一档就是几 MB，而且内容是动态的，切子集永远切不全。弯引号 U+2018–201D 交给中文字体。 */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url(fonts/Geist-Regular.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-2017, U+201E-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url(fonts/Geist-Medium.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-2017, U+201E-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url(fonts/Geist-SemiBold.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-2017, U+201E-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url(fonts/Geist-Bold.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-2017, U+201E-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(fonts/GeistMono-Regular.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-2017, U+201E-206F, U+2190-21FF, U+2212; }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(fonts/GeistMono-Medium.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-2017, U+201E-206F, U+2190-21FF, U+2212; }

/* 色相可以过渡：首页换主视觉时，环境光的色温跟着慢慢变 */
@property --h { syntax: "<number>"; inherits: true; initial-value: 250; }

:root {
  /* ---------- 字 ---------- */
  --cjk: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei";
  --sans: "Geist", var(--cjk), system-ui, sans-serif;
  --mono: "Geist Mono", var(--cjk), ui-monospace, monospace;
  /* 字号阶梯：展示 84 → 正文 17，每一级约是下一级的 1.25–1.5 倍，中间不插随手值。 */
  --fs-display: clamp(46px, 5.8vw, 84px);
  --fs-title:   clamp(31px, 4.3vw, 62px);
  --fs-h2:      clamp(25px, 2.9vw, 40px);
  --fs-h3:      22px;
  --fs-lead:    18px;
  --fs-body:    17px;
  --fs-read:    18px;
  --fs-small:   14px;
  --fs-meta:    12px;                       /* 等宽小标签，最小字号 */
  --lh-display: 1.04;  --ls-display: -0.035em;
  --lh-title:   1.16;  --ls-title:   -0.03em;
  --lh-h2:      1.2;   --ls-h2:      -0.025em;
  --lh-body:    1.75;  --lh-read:    1.95;  --ls-read: 0.01em;
  --ls-meta:    0.08em;

  /* ---------- 颜色：一套墨色 + 一个按页（或按物件）取的强调色 ---------- */
  --h: 250;
  --canvas:  #f8f8fa;                              /* 画布：冷白，不是纯白也不是纸黄 */
  --paper:   #ffffff;                              /* 纸：阅读区、浮起的物件 */
  --sunk:    #f1f2f5;                              /* 凹：按下、悬停的行、代码底 */
  --ink:     #0b0d12;
  --ink-2:   #464a55;                              /* 正文 ≈ 9:1 */
  --ink-3:   #727784;                              /* 说明 ≈ 4.6:1，最浅的可读字 */
  --ink-4:   #a6aab4;                              /* 只给装饰与分隔符 */
  --hair:    rgba(11, 13, 18, .08);                /* 发丝线：分隔内容 */
  --hair-2:  rgba(11, 13, 18, .14);                /* 发丝线：可点的描边 */
  --danger:  oklch(0.56 0.19 25);
  --danger-wash: oklch(0.97 0.02 25);
  --ok:      oklch(0.62 0.15 150);
  --warn:    oklch(0.68 0.14 70);
  --on-ink:  #ffffff;

  /* ---------- 景深：浅色没有暗场白送的景深，靠环境光、多层投影、纸的高光、留白 ---------- */
  --shadow-1: 0 0 0 1px rgba(11,13,18,.05), 0 1px 2px rgba(11,13,18,.06);
  --shadow-2: 0 0 0 1px rgba(11,13,18,.05), 0 1px 2px rgba(11,13,18,.04), 0 8px 16px -8px rgba(11,13,18,.10), 0 24px 48px -24px rgba(11,13,18,.16);
  --highlight: inset 0 1px 0 rgba(255,255,255,.95);
  --glass: rgba(250, 250, 252, .72);
  --glass-filter: saturate(180%) blur(20px);

  /* ---------- 尺寸与节奏 ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section: 144px;
  --r-s: 8px; --r: 14px; --r-l: 22px; --r-sheet: 32px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --measure: 680px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --t-fast: .2s; --t: .45s; --t-slow: .9s;
  color-scheme: light;
}

/* 由色相算出的变量。凡是自己设了 --h 的元素都加 class="hue"，它和它的子孙就换成自己的颜色 */
:root, .hue {
  --accent:      oklch(0.55 0.15 var(--h));        /* 浅底上的字、数字、进度 */
  --accent-soft: oklch(0.80 0.15 var(--h));        /* 光：辉光、环境光 */
  --accent-wash: oklch(0.80 0.15 var(--h) / .12);  /* 底：高亮、选中 */
  --ambient:
    radial-gradient(1100px 700px at 80% -4%, oklch(0.82 0.13 var(--h) / .17), transparent 66%),
    radial-gradient(800px 520px at -6% -12%, oklch(0.75 0.03 260 / .10), transparent 70%);
  --shadow-3: 0 0 0 1px rgba(11,13,18,.04), 0 2px 4px rgba(11,13,18,.05), 0 14px 28px -12px rgba(11,13,18,.16), 0 44px 88px -32px rgba(11,13,18,.28), 0 64px 120px -48px oklch(0.55 0.15 var(--h) / .40);
  /* 釉：应用图标、缩略图底色。黄橙色相在同样亮度下会发褐，--lift 按离黄色多近把亮度抬一点 */
  --lift: 0;
  --glaze: linear-gradient(165deg, oklch(calc(.76 + var(--lift)) .115 var(--h)), oklch(calc(.56 + var(--lift)) .15 calc(var(--h) + 14)));
}
@supports (width: calc(1px * cos(0deg))) {
  :root, .hue { --lift: calc(max(0, cos((var(--h) - 80) * 1deg)) * .1); }
}

/* 不认 oklch 的旧内核（部分 App 内置浏览器）：用 hsl 近似，色相略有偏差，不至于没颜色 */
@supports not (color: oklch(0 0 0)) {
  :root, .hue {
    --accent: hsl(var(--h) 55% 44%); --accent-soft: hsl(var(--h) 80% 72%); --accent-wash: hsl(var(--h) 80% 72% / .12);
    --ambient: radial-gradient(1100px 700px at 80% -4%, hsl(var(--h) 70% 80% / .17), transparent 66%);
    --shadow-3: 0 0 0 1px rgba(11,13,18,.04), 0 2px 4px rgba(11,13,18,.05), 0 14px 28px -12px rgba(11,13,18,.16), 0 44px 88px -32px rgba(11,13,18,.28);
    --glaze: linear-gradient(165deg, hsl(var(--h) 60% 68%), hsl(var(--h) 55% 46%));
  }
  :root { --danger: #c8322b; --danger-wash: #fbeeed; --ok: #2f9a5a; --warn: #c98a1a; }
}