/* 自動生成。編集しない。tokens.json を直し、npm run tokens:build で作り直す */
/* 住宅プランナー（jutakuplanner.com） */
:root {
  --paper: #FAFAF8; /* 背景。わずかに温かい白。純白は図面が浮く */
  --ink: #1A1D21; /* 主要テキスト */
  --ink-muted: #6B7280; /* 補助テキスト */
  --line: #DDE1E6; /* 罫線・グリッド */
  --state-ok: #2F7A57; /* 建つ／問題なし */
  --state-warn: #8A5A10; /* 要確認／エスカレーション。構想書の案 #B8791A は背景に対して3.47:1でコントラストが足りなかったため暗くした */
  --state-stop: #B4453C; /* 建たない／制限に抵触 */

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 52px;

  --radius-small: 4px;
  --radius-panel: 12px;

  --font-family: "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-numeric: tabular-nums;
  --line-height: 1.7;
  --measure: 38ch;

  --duration-state: 175ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  --logo-color: var(--ink);
  --logo-min-width: 24px;
  --logo-clear-space-ratio: 0.25;
  --splash-logo-width: 120px;
  --splash-background: var(--paper);
}

/* 暗い配色。紙と墨を入れ替え、状態色は4.5:1を満たす明度に上げてある */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1A1D21; /* 背景。明るい配色の ink と入れ替えただけ */
    --ink: #FAFAF8; /* 主要テキスト。明るい配色の paper と入れ替えただけ */
    --ink-muted: #7F8694; /* 補助テキスト。背景に対して4.62:1。色相と彩度を保ったまま明度だけ上げて算出 */
    --line: #292F37; /* 罫線・グリッド。明るい配色の 罫線/背景 と同じ比（約1.26:1）になる明度で算出 */
    --state-ok: #3A966B; /* 背景に対して4.63:1。色相と彩度を保ったまま明度だけ上げて算出 */
    --state-warn: #B87815; /* 背景に対して4.62:1。結果的に構想書16-3の案 #B8791A とほぼ同じ値になった */
    --state-stop: #CB6A62; /* 背景に対して4.65:1。色相と彩度を保ったまま明度だけ上げて算出 */
  }
}

/* 明示的に切り替えたいとき */
:root[data-theme="dark"] {
  --paper: #1A1D21; /* 背景。明るい配色の ink と入れ替えただけ */
  --ink: #FAFAF8; /* 主要テキスト。明るい配色の paper と入れ替えただけ */
  --ink-muted: #7F8694; /* 補助テキスト。背景に対して4.62:1。色相と彩度を保ったまま明度だけ上げて算出 */
  --line: #292F37; /* 罫線・グリッド。明るい配色の 罫線/背景 と同じ比（約1.26:1）になる明度で算出 */
  --state-ok: #3A966B; /* 背景に対して4.63:1。色相と彩度を保ったまま明度だけ上げて算出 */
  --state-warn: #B87815; /* 背景に対して4.62:1。結果的に構想書16-3の案 #B8791A とほぼ同じ値になった */
  --state-stop: #CB6A62; /* 背景に対して4.65:1。色相と彩度を保ったまま明度だけ上げて算出 */
}

/* 判定の状態。色だけで伝えないため、アイコン名とテキストもトークンで持つ */
[data-state="ok"] {
  --state-color: var(--state-ok);
  --state-icon: "check";
  --state-text: "問題なし";
}
[data-state="warn"] {
  --state-color: var(--state-warn);
  --state-icon: "question";
  --state-text: "要確認";
}
[data-state="stop"] {
  --state-color: var(--state-stop);
  --state-icon: "cross";
  --state-text: "制限に抵触";
}
[data-state="escalate"] {
  --state-color: var(--state-warn);
  --state-icon: "question";
  --state-text: "工務店に確認";
}

/* ロゴ。単色で、置かれた場所の文字色を継承する（色は状態に予約しているため） */
.logo {
  color: var(--logo-color);
  min-width: var(--logo-min-width);
  /* 周囲にロゴ幅の25%以上のアキを取る。ここには何も置かない */
  margin: calc(var(--logo-clear-space-ratio) * 1em);
}

/* スプラッシュ。画面中央にマークだけを置く */
.splash {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: var(--splash-background);
}
.splash .logo { width: var(--splash-logo-width); margin: 0; }

/* 数値（寸法・金額）は等幅数字。桁が揺れると金額の信頼感が落ちる */
.numeric { font-variant-numeric: var(--font-numeric); }

/* 影は使わない。階層は線と余白で表現する */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}