/* ============================================================
   叶子 · Leaf
   ------------------------------------------------------------
   tokens.css —— 只放设计令牌。
   组件样式在 main.css。分开是为了让「配色改动」只改一个文件。

   配色来源：用户提供的叶片照片实测
     叶肉主色   #4a8f2e ~ #6cae3a（黄绿 -> 草绿）
     叶脉高光   #cfe08a ~ #e8f0b0（嫩黄绿）
     叶柄/边缘  #8a6a2e（枯黄棕）
     叶背暗部   #23441a（深墨绿）
   在此基础上：
     底色走「植物实验室」的深墨绿黑，让叶脉荧光能发出来；
     强调色取叶脉的嫩黄绿，作为全站唯一的亮色锚点。

   碳基 vs 硅基对照 ——
     碳基侧用叶脉荧光绿（有机、柔和、呼吸感）；
     硅基侧用冷青（机械、精确、方角）。
     两套色在同一个页面上并置，靠形状（圆 vs 方）和色相拉开差异。
   ============================================================ */

/* ---------- 1. 深色（默认，也是叶脉荧光的主场） ---------- */
:root {
  /* 底色：不是纯黑，是深墨绿。纯黑会让叶片像贴纸浮在上面，
     带绿的黑能让叶片和背景产生"同一个生态"的关联感。 */
  --bg-0: #06100a;          /* 最深，页面基底 */
  --bg-1: #0a1810;          /* 次深 */
  --bg-2: #0f2417;          /* 抬升面 */

  /* 叶片本色阶（直接来自照片采样） */
  --leaf-1: #23441a;        /* 叶背暗部 */
  --leaf-2: #3d7a26;
  --leaf-3: #4a8f2e;        /* 叶肉主色 */
  --leaf-4: #6cae3a;
  --leaf-5: #8ec94f;        /* 受光面 */
  --vein-1: #cfe08a;        /* 叶脉 */
  --vein-2: #e8f0b0;        /* 叶脉高光 */
  --petiole: #8a6a2e;       /* 叶柄 */

  /* 语义色：碳基 / 硅基 两套 */
  --carbon: #8ec94f;        /* 碳基 —— 荧光嫩绿 */
  --carbon-glow: rgba(142, 201, 79, .5);
  --silicon: #5fd6d0;       /* 硅基 —— 冷青 */
  --silicon-glow: rgba(95, 214, 208, .42);

  --accent: #8ec94f;
  --accent-2: #5fd6d0;
  --accent-3: #e8f0b0;
  --accent-glow: rgba(142, 201, 79, .5);

  /* 文字：不用纯白。植物实验室的纸感是微暖的米白，纯白会显脏。 */
  --ink: #eaf3e4;
  --ink-soft: #b9cdaf;
  --ink-dim: #7f9578;
  --ink-faint: #5c6f57;

  /* ---- 玻璃参数 ----
     玻璃感 = 半透明底 + 背景模糊 + 1px 亮边 + 顶部高光。
     这个站的玻璃要"潮"一点 —— 像培养皿盖，所以底色带绿。 */
  --glass-bg: rgba(180, 230, 150, .045);
  --glass-bg-hi: rgba(180, 230, 150, .085);
  --glass-bg-lo: rgba(180, 230, 150, .028);
  --glass-blur: 20px;
  --glass-sat: 150%;
  --glass-border: rgba(190, 235, 160, .12);
  --glass-border-hi: rgba(190, 235, 160, .24);
  --glass-sheen: inset 0 1px 0 rgba(220, 245, 190, .15);
  --glass-sheen-soft: inset 0 1px 0 rgba(220, 245, 190, .08);
  --glass-shadow: 0 12px 34px -12px rgba(2, 10, 4, .75);
  --glass-shadow-hi: 0 22px 52px -16px rgba(2, 10, 4, .82);

  --hairline: rgba(190, 235, 160, .09);
  --hairline-soft: rgba(190, 235, 160, .05);

  /* 3D / canvas 读取用（逗号分隔 RGB，便于 JS parse） */
  --leaf-rgb: 142, 201, 79;
  --silicon-rgb: 95, 214, 208;
  --nebula-1: 35, 68, 26;
  --nebula-2: 142, 201, 79;

  /* 排版 —— 中文标题用衬线更"植物图鉴"，正文用无衬线保证可读 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia,
                "Times New Roman", serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 动效时长 —— 植物的节奏比机器慢，所以整体比常规站点长一档 */
  --t-fast: .2s;
  --t-mid: .38s;
  --t-slow: .7s;
  --t-xslow: 1.3s;
  --ease-out: cubic-bezier(.22, .8, .28, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* 生长曲线：慢起快中缓收，模拟植物抽条的节奏 */
  --ease-grow: cubic-bezier(.16, .84, .28, 1);

  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* 内容列宽度。
     ------------------------------------------------------------
     这个值不是"随便定个好看的宽度"，它由叶片的生存空间反推出来。

     背景：叶片是画在 canvas 上的，内容层 .page 是透明的（见 main.css），
     透明层只叠加不遮挡 —— 所以叶片一旦出现在卡片后面，
     叶肉会把卡片文字糊掉。早期试过"把叶片限制在右侧安全带"
     的办法，但内容列原本是 1180px，铺满视口时两侧只剩 130px，
     而叶片宽约 500px，横向根本无处可躲：
     实测 1440x900 下 96 个滚动位置里有 86 个叶片压在卡片上。

     所以改成**给叶片留出专属右栏**：内容列收窄靠左，
     右侧空出一条真正没有内容的带子，叶片全程在带子里活动。

     数值来源（以 1440px 视口为例）：
       视口 1440
       内容列 900 + 左右各 32 padding = 964
       内容列靠左留白 56
       => 内容右边界 = 56 + 964 = 1020
       => 右侧空带 = 1440 - 1020 = 420px
       再扣掉叶片和卡片之间的安全间距，叶片可用宽度 ≈ 360px

     窄视口下靠 --wrap 的 max-width + 左右 padding 自然退让，
     叶片另有 1024px 以下的隐藏规则兜底。 */
  --wrap: 900px;
  /* 内容列往左挪一点，把空间让给右侧的叶片 */
  --wrap-shift: -176px;

  color-scheme: dark;
}

/* ---------- 2. 浅色：植物标本纸 ---------- */
/* 浅色不是"把深色反相"，而是换一个场景 ——
   白天在实验室看压制好的标本，纸是微黄的米白，叶脉是深绿。 */
:root[data-theme="light"] {
  --bg-0: #f4f1e4;
  --bg-1: #ece8d6;
  --bg-2: #fbf9f0;

  --carbon: #3f7a1f;
  --carbon-glow: rgba(63, 122, 31, .3);
  --silicon: #1f8a86;
  --silicon-glow: rgba(31, 138, 134, .26);

  --accent: #3f7a1f;
  --accent-2: #1f8a86;
  --accent-3: #6d8f1e;
  --accent-glow: rgba(63, 122, 31, .3);

  --ink: #16240f;
  --ink-soft: #3a4d31;
  --ink-dim: #5c7052;
  --ink-faint: #86927d;

  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-hi: rgba(255, 255, 255, .8);
  --glass-bg-lo: rgba(255, 255, 255, .4);
  --glass-blur: 18px;
  --glass-sat: 120%;
  --glass-border: rgba(255, 255, 255, .92);
  --glass-border-hi: rgba(255, 255, 255, 1);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .96);
  --glass-sheen-soft: inset 0 1px 0 rgba(255, 255, 255, .82);
  --glass-shadow: 0 12px 30px -14px rgba(48, 66, 32, .26);
  --glass-shadow-hi: 0 22px 48px -18px rgba(48, 66, 32, .34);

  --hairline: rgba(40, 60, 26, .11);
  --hairline-soft: rgba(40, 60, 26, .06);

  --leaf-rgb: 63, 122, 31;
  --silicon-rgb: 31, 138, 134;
  --nebula-1: 190, 210, 160;
  --nebula-2: 120, 165, 70;

  color-scheme: light;
}

/* ---------- 3. 跟随系统（仅在用户没手动选过时生效） ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #f4f1e4;
    --bg-1: #ece8d6;
    --bg-2: #fbf9f0;
    --carbon: #3f7a1f;
    --carbon-glow: rgba(63, 122, 31, .3);
    --silicon: #1f8a86;
    --silicon-glow: rgba(31, 138, 134, .26);
    --accent: #3f7a1f;
    --accent-2: #1f8a86;
    --accent-3: #6d8f1e;
    --accent-glow: rgba(63, 122, 31, .3);
    --ink: #16240f;
    --ink-soft: #3a4d31;
    --ink-dim: #5c7052;
    --ink-faint: #86927d;
    --glass-bg: rgba(255, 255, 255, .58);
    --glass-bg-hi: rgba(255, 255, 255, .8);
    --glass-bg-lo: rgba(255, 255, 255, .4);
    --glass-blur: 18px;
    --glass-sat: 120%;
    --glass-border: rgba(255, 255, 255, .92);
    --glass-border-hi: rgba(255, 255, 255, 1);
    --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .96);
    --glass-sheen-soft: inset 0 1px 0 rgba(255, 255, 255, .82);
    --glass-shadow: 0 12px 30px -14px rgba(48, 66, 32, .26);
    --glass-shadow-hi: 0 22px 48px -18px rgba(48, 66, 32, .34);
    --hairline: rgba(40, 60, 26, .11);
    --hairline-soft: rgba(40, 60, 26, .06);
    --leaf-rgb: 63, 122, 31;
    --silicon-rgb: 31, 138, 134;
    --nebula-1: 190, 210, 160;
    --nebula-2: 120, 165, 70;
    color-scheme: light;
  }
}

/* ---------- 4. 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-blur: 9px;
    --t-fast: .01ms;
    --t-mid: .01ms;
    --t-slow: .01ms;
    --t-xslow: .01ms;
  }
}

/* 不支持 backdrop-filter 的浏览器：玻璃要退回成实体色，
   否则半透明底在没有任何模糊的情况下会让文字糊在背景上。 */
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --glass-bg: rgba(12, 30, 18, .82);
    --glass-bg-hi: rgba(16, 38, 22, .9);
    --glass-bg-lo: rgba(10, 26, 15, .76);
  }
  :root[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, .92);
    --glass-bg-hi: rgba(255, 255, 255, .97);
    --glass-bg-lo: rgba(255, 255, 255, .86);
  }
}