/* BeesBuild web tokens v1 (2026-11-06)
 * 元：製品の色（Graphite、beekit/reference/tokens.css）。サイト・ドキュメント・Camp・News で共通に使う。
 * 色の意味は製品と同じ。琥珀＝人の番（押すのは人）。シアン＝AI が作業中。紫＝レビュー。緑＝完了。赤＝失敗。
 * ロゴの金はロゴと冠だけに使う。
 */
:root {
  color-scheme: dark;

  /* 面（暗い順） */
  --color-paper: #0B0C0E;      /* 地 */
  --color-paper-2: #111316;    /* 面 */
  --color-paper-3: #16191D;    /* 浮いた面 */
  --color-hover: #1B1F24;      /* 押せる面の上に乗った時 */
  --color-rule: #24282E;       /* 線 */
  --color-rule-2: #1B1E23;     /* うすい線 */
  --color-rule-strong: #343A42;/* 強めの線（入力欄のふち） */

  /* 文字 */
  --color-ink: #EDEFF2;
  --color-ink-2: #A3A9B3;
  --color-muted: #838A96; /* 製品の字 3（Graphite の直し：ホバーの地の上でも 4.5:1） */

  /* 製品の信号（色だけに頼らず、文字と形も添える） */
  --color-human: #FFB224;      /* 人の番・押すのは人 */
  --color-ai: #4CC9F0;         /* AI が作業中 */
  --color-review: #9D8CFF;     /* レビュー（エンジニア） */
  --color-done: #34D399;       /* 完了・マージ済み */
  --color-failed: #F87171;     /* 失敗・食い違い */
  --color-idle: #6B717C;       /* 信号なし */

  /* 信号の淡い面（地の上に重ねる） */
  --color-human-wash: #2A2112;
  --color-ai-wash: #10232B;
  --color-review-wash: #1C1A2E;
  --color-done-wash: #0F2620;
  --color-failed-wash: #2B1717;

  /* ブランド（ロゴと冠だけ） */
  --color-gold: #BDA66B;
  --color-silver: #BCC4CE;
  --color-paper-light: #F3F4F6; /* 明るい地のロゴの見本だけに使う */

  /* 役割 */
  --color-accent: var(--color-human);
  --color-accent-hover: #FFC14F;
  --color-accent-press: #E89E14;
  --color-accent-ink: #0B0C0E;
  --color-focus: #EDEFF2;

  /* 字（見出しは IBM Plex Sans JP、本文は製品と同じ並び、ID と数字は JetBrains Mono） */
  --font-display: "IBM Plex Sans JP", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans JP", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-outlier: var(--font-mono);

  /* 字の大きさ（1440 の幅で h1 64px・h2 40px） */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-display: clamp(2.25rem, 2.5vw + 1.75rem, 4.25rem);
  --text-display-s: clamp(2rem, 2vw + 1.4rem, 3.25rem);
  --text-section: clamp(1.875rem, 1.6vw + 1.1rem, 2.75rem);
  --text-title: clamp(1.1875rem, 0.5vw + 0.95rem, 1.5rem);
  --text-lead: clamp(1.0625rem, 0.3vw + 0.95rem, 1.3125rem);
  --text-figure: clamp(2.5rem, 3vw + 1rem, 4.5rem);

  --leading-display: 1.18;
  --leading-head: 1.3;
  --leading-body: 1.85;
  --leading-tight: 1.5;
  --tracking-display: -0.01em;

  /* 間（この目盛りだけを使う） */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;

  /* 枠 */
  --container: 1440px;
  --measure: 40em;
  --gutter: 64px;
  --gap-columns: 32px;
  --section-gap-s: 120px;
  --section-gap: 144px;
  --section-gap-l: 176px;
  --nav-height: 64px;
  --label-col: 120px;

  /* 形 */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-card: var(--radius-3);
  --radius-pill: 999px;
  --rule-hair: 1px;
  --shadow-card: 0 1px 0 #00000059, 0 12px 32px -16px #00000099;

  /* 動き */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* 重なり */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;

  /* 製品の名前で書いた別名（ドキュメント・Camp・News の CSS 向け） */
  --bg: var(--color-paper);
  --panel: var(--color-paper-2);
  --raise: var(--color-paper-3);
  --hover: var(--color-hover);
  --line: var(--color-rule);
  --line2: var(--color-rule-2);
  --text: var(--color-ink);
  --text2: var(--color-ink-2);
  --text3: var(--color-muted);
  --signal-human-needed-amber: var(--color-human);
  --signal-ai-working-cyan: var(--color-ai);
  --signal-review-violet: var(--color-review);
  --signal-done-green: var(--color-done);
  --signal-failed-red: var(--color-failed);
  --signal-idle-gray: var(--color-idle);
  --font-sans: var(--font-body);
}

@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; --gap-columns: 24px; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 64px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; }
}