/*
 * 自動生成。手で書き換えない。
 * 出どころ: src/canvas/tokens.ts + src/interactive/nodes3.ts
 * 生成:     npx tsx tools/emit_web_tokens.ts
 *
 * 数値は 1920px の版面での px（単位無し）。--u を掛けて使う。
 * 配色は "carbon"。映像の地とページの地は同じ色でなければならない。
 */
:root {
  --canvas-w: 1920;
  --canvas-h: 1080;
  --canvas-ratio: 1920 / 1080;

  /* 余白の階梯。中間値を作らない */
  --space-xs: 24;
  --space-s: 48;
  --space-m: 96;
  --space-l: 160;
  --space-xl: 256;

  /* 版面の列 */
  --margin: 96;
  --gutter: 24;

  /* 文字の階梯。8段。ここに無い大きさは使わない */
  --type-micro: 56;
  --type-label: 72;
  --type-body: 92;
  --type-lead: 118;
  --type-head: 152;
  --type-title: 196;
  --type-hero: 252;
  --type-mega: 340;
  --lead-micro: 1.6;
  --lead-label: 1.55;
  --lead-body: 1.7;
  --lead-lead: 1.55;
  --lead-head: 1.3;
  --lead-title: 1.18;
  --lead-hero: 1.1;
  --lead-mega: 1;
  --track-micro: 0.04em;
  --track-label: 0.03em;
  --track-body: 0.02em;
  --track-lead: 0.01em;
  --track-head: 0em;
  --track-title: -0.01em;
  --track-hero: -0.02em;
  --track-mega: -0.03em;

  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-numeric: "Helvetica Neue", "Hiragino Sans", system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* 色の役割。生の色をページ側で書かない（配色 "carbon"） */
  --bg: #0A0B0F;
  --surface: #16181F;
  --ink: #F2F0EA;
  --ink-sub: #AEB6C6;
  --accent: #FF5A3C;
  --on-accent: #1A0A06;
  --rule: #2A2F3A;
  --neutral: #79808F;

  /* ノード画面の中の座標。ページが «映像の中と同じ場所» へ描くために要る */
  --col-left: 630;
  --col-right: 1824;
  --col-w: 1194;
  --slot-top: 290;
  --slot-h: 170;
  --line-size: 152;
  --eyebrow-size: 72;
}