/*
 * Createc · 设计令牌 (tokens.css)
 * 来源：_work/DESIGN.md 第 2 节「光棚 · 工业三维」。
 * 只放变量，不放任何选择器规则（除 :root / .is-dark 语义色重映射）。
 * 页面/组件一律引用这里的变量，不要写死色值与尺寸。
 */

:root {
  color-scheme: light;

  /* ---------- 色彩 ---------- */
  --paper: #f0f1ee;
  --paper-2: #e6e8e3;
  --card: #fafaf8;
  --white: #fff;

  --ink: #0e1012;
  --ink-2: #40454b;
  --mute: #80868d;            /* 装饰性/大字用；小字请用 --mute-ink（对比度 ≥4.5） */
  --mute-ink: #5d636a;        /* 浅底上可读的次要文字，对比度 ≈5.3:1 */

  --line: #d3d6d1;
  --line-2: #bfc3bd;

  --graphite: #14171a;
  --graphite-2: #1d2125;
  --on-graphite: #e9ebe7;

  --accent: #2b45ff;          /* 信号橙：整站唯一强调色 */
  --accent-ink: #ffffff;
  --signal: #ff5a1f;          /* 机械部件橙：只用于 3D 模型/零件标注，不作界面强调色 */
  --grad-brand: linear-gradient(135deg, #1f35e8 0%, #3d5bff 48%, #7f9bff 100%);
  --grad-deep: linear-gradient(160deg, #0b1236 0%, #14214f 55%, #1c2f86 100%);
  --grad-paper: radial-gradient(1200px 600px at 85% -10%, rgba(61,91,255,.24), transparent 60%), radial-gradient(900px 500px at -5% 20%, rgba(127,155,255,.22), transparent 60%);      /* 橙底上的文字 */
  --accent-soft: rgba(43, 69, 255, .10);
  --accent-text: #2336d4;     /* 浅底上的「小号橙字」（编号等），对比度 ≈4.7:1；填充/线条/大字仍用 --accent */

  --ok: #1f9d55;              /* 仅用于 ✓ 已完成/在线 状态点 */

  /* 语义色（组件读这组；.is-dark 区块会整体重映射） */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-mute: var(--mute-ink);
  --bd: var(--line);
  --bd-strong: var(--line-2);
  --surface: var(--card);
  --accent-fg: var(--accent-text);

  /* 细线网格（.grid-bg） */
  --grid-size: 40px;
  --grid-line: rgba(14, 16, 18, .06);
  --grid-line-major: rgba(14, 16, 18, .10);

  /* ---------- 字体 ---------- */
  --font-display: 'Barlow Condensed', 'Createc Sans', system-ui, sans-serif;  /* 大标题、英文/数字大字 */
  --font-body: 'Inter', 'Createc Sans', system-ui, sans-serif;                /* 正文 */
  --font-mono: 'JetBrains Mono', 'Createc Sans', ui-monospace, 'SF Mono', Menlo, monospace; /* 编号/标签/参数 */

  /* ---------- 字号阶梯 ---------- */
  --fs-display: clamp(64px, 12vw, 200px);        /* 超大数字（Barlow） */
  --fs-h1: clamp(44px, 7.4vw, 124px);
  --fs-h2: clamp(30px, 4.2vw, 64px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-lg: clamp(17px, 1.3vw, 20px);             /* 导语 lede */
  --fs-body: clamp(16px, calc(14.4px + .2vw), 17px);
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-mono: 12px;
  --fs-mono-lg: 13px;

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-h2: 1.08;
  --lh-body: 1.7;

  --ls-tight: -.02em;
  --ls-mono: .08em;                              /* mono 小标字距 .06–.1em */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- 间距（4px 基准） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --gutter: clamp(20px, 3vw, 48px);              /* 容器左右留白 */
  --col-gap: clamp(16px, 2vw, 32px);             /* 12 列栅格列间距 */
  --sec-y: clamp(72px, 10vw, 160px);             /* 区块上下间距 */
  --sec-head-gap: clamp(32px, 5vw, 72px);        /* 区块头与内容的间距 */

  /* ---------- 圆角 / 切角 ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;                                    /* 圆角最大 4px */
  --cut-sm: 6px;                                 /* 铭牌/tag 切角 */
  --cut: 12px;                                   /* 按钮/卡片切角（10–14px） */
  --cut-lg: 14px;

  /* ---------- 阴影（柔和，棚拍感） ---------- */
  --shadow-1: 0 1px 2px rgba(14, 16, 18, .06), 0 10px 28px -14px rgba(14, 16, 18, .22);
  --shadow-2: 0 2px 4px rgba(14, 16, 18, .06), 0 28px 64px -24px rgba(14, 16, 18, .35);

  /* ---------- 缓动与时长 ---------- */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 200ms;
  --dur: 450ms;
  --dur-slow: 700ms;
  --stagger: 70ms;                               /* .reveal data-delay 的步长 */
  --reveal-y: 24px;                              /* 入场位移 ≤28px */

  /* ---------- 容器 ---------- */
  --container: 1440px;
  --container-narrow: 1120px;
  --container-text: 720px;
  --nav-h: 64px;                                 /* 固定导航高度；sticky 元素用 top: var(--nav-h) */

  /* ---------- z-index 层级 ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-fab: 80;
  --z-menu: 90;
  --z-nav: 100;
  --z-progress: 110;
  --z-modal: 200;
  --z-toast: 300;
  --z-skip: 400;
}

/* 石墨黑区块：给任意容器加 .is-dark，里面的组件自动换成深色语义色
   （.sec--dark / .band / .footer 已内置，无需再加 .is-dark） */
.is-dark,
.sec--dark,
.band,
.footer {
  --bg: var(--graphite);
  --fg: var(--on-graphite);
  --fg-2: #b4b9b5;
  --fg-mute: #8d9399;
  --bd: #2e3338;
  --bd-strong: #454b51;
  --surface: var(--graphite-2);
  --accent-fg: var(--accent);
  --grid-line: rgba(233, 235, 231, .05);
  --grid-line-major: rgba(233, 235, 231, .09);
}