/* 案件全体の色・文字・余白・イージングのトークンを担当する。
   最初に読み込む。色はここだけを正本にし、他のCSSとJSは変数を参照する。
   6色の切替は html[data-hue]、3つの光の切替は [data-light-state] の1か所だけで行う。 */
:root {
  /* 面。生成りの紙と白木。写真は無彩色で撮ってあるので、地色が世界の温度を決める。 */
  --color-paper: #FAF6F1;
  --color-paper-deep: #F1EBE2;
  --color-wood: #E7DFD3;
  --color-line: #DCD3C6;

  /* 文字。どの地色の上でも12.7:1以上を保つ濃さ。薄くしない。 */
  --color-text: #2E2A28;
  --color-text-soft: #5E564F;
  --color-text-light: #FFFFFF;

  /* 選ばれている色。accentは面・スウォッチ・光にだけ使い、文字を載せない。
     inkは文字とソリッドボタンの地色に使う(白文字とのコントラストは6.19:1以上)。
     hue-rgbはcanvasの描画色で、JSがここを正本として読む。 */
  --hue: #D14D77;
  --hue-ink: #A8305A;
  --hue-rgb: 209 77 119;
  --hue-surface: #FBF2F4;

  /* 光の見えかた。lightセクションの写真とチップへ重ねる薄い膜。 */
  --light-veil: 255 244 226;
  --light-veil-alpha: .30;

  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --section-space: clamp(72px, 8vw, 128px);
  --block-space: clamp(28px, 4vw, 56px);

  /* 動きのトークン。尺はゆっくり側に寄せる(所長指示 2026-08-16)。 */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-ui: .34s;
  --dur-hue: .7s;
}

/* ------------------------------------------------------------------ 6色 */
/* 段階値を直に持ち、連続補間はしない。paperは地色を一段だけ動かす。 */
html[data-hue="umegasane"] {
  --hue: #E0A0A6;
  --hue-ink: #9A4750;
  --hue-rgb: 224 160 166;
  --hue-surface: #FBF4F3;
  --color-paper: #FBF4F3;
  --color-paper-deep: #F3E9E7;
}

html[data-hue="tsutsuji"] {
  --hue: #D14D77;
  --hue-ink: #A8305A;
  --hue-rgb: 209 77 119;
  --hue-surface: #FBF2F4;
  --color-paper: #FBF2F4;
  --color-paper-deep: #F2E5E9;
}

html[data-hue="benihi"] {
  --hue: #DE5232;
  --hue-ink: #A8371B;
  --hue-rgb: 222 82 50;
  --hue-surface: #FDF3EF;
  --color-paper: #FDF3EF;
  --color-paper-deep: #F5E5DE;
}

html[data-hue="tsuyukusa"] {
  --hue: #3E75B8;
  --hue-ink: #235688;
  --hue-rgb: 62 117 184;
  --hue-surface: #F3F5F9;
  --color-paper: #F3F5F9;
  --color-paper-deep: #E5EAF1;
}

html[data-hue="kuchiba"] {
  --hue: #AE6330;
  --hue-ink: #7E4318;
  --hue-rgb: 174 99 48;
  --hue-surface: #FBF4EC;
  --color-paper: #FBF4EC;
  --color-paper-deep: #F1E6D6;
}

html[data-hue="suo"] {
  --hue: #8E3A4C;
  --hue-ink: #7A2C3D;
  --hue-rgb: 142 58 76;
  --hue-surface: #F9F1F2;
  --color-paper: #F9F1F2;
  --color-paper-deep: #EFE2E4;
}

/* ------------------------------------------------------------------ 3つの光 */
[data-light-state="morning"] {
  --light-veil: 255 243 222;
  --light-veil-alpha: .38;
}

[data-light-state="shop"] {
  --light-veil: 242 248 255;
  --light-veil-alpha: .3;
}

[data-light-state="night"] {
  --light-veil: 22 27 48;
  --light-veil-alpha: .62;
}