/* yoyaku.hair — デザイントークン (契約 = repo 直下 DESIGN.md「ポール — 街の床屋の温度」)。
   値は DESIGN.md の frontmatter。色・書体・余白を変える時は DESIGN.md を先に直す。
   読む側: /top.css (客側トップ) と /style.css (/book・/staff・/gate.html)。HTML はこのファイルを先に <link> する。
   2026-09-04 段階 3: top.css の :root をここへ切り出し、店側 (body.staff) の紙の反転面を足した */
:root {
  color-scheme: dark;

  /* 地色の 2 極。客側は暖黒の地にクリームの文字、店側 (body.staff) は反転 */
  --cream: #EDE6D6;
  --black: #14110F;
  --surface: var(--black);
  --ink: var(--cream);
  --primary: #F2C14E;
  --on-primary: var(--black); /* 黄の上の文字は両面とも暖黒 */
  --pole-red: #C8332B;
  --pole-blue: #1F4E8C;
  --muted: #A89F8E;
  --rule: color-mix(in srgb, var(--ink) 20%, transparent);
  --tint: color-mix(in srgb, var(--ink) 6%, var(--surface));   /* 表の見出し行などの薄い面 (不透明) */
  --tint-2: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --overlay: color-mix(in srgb, var(--surface) 40%, transparent); /* hero 写真は明度 50% に焼いた版 (img/hero-sumikawa.jpg) なので被せは 40% — 合計で従来の「60% 被せ」と同じ暗さ */

  --font-display: "Anton", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-display-ja: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "Oswald", "Noto Sans JP", "Hiragino Sans", sans-serif;

  --base: 8px;
  --section: 96px;
  --pad: clamp(20px, 4vw, 48px);
  --measure: 40em;
  --wrap: 1200px;

  /* 縞 1 色 14px (4px の線上で約 20px の斜め片に見える。8px だと破線に見えた)。白帯は地に関わらずクリーム (本物のポールの白) */
  --stripe: repeating-linear-gradient(45deg, var(--pole-red) 0 14px, var(--cream) 14px 28px, var(--pole-blue) 28px 42px);
  --stripe-period: 59.4px; /* 42px × √2 = 縞 1 周ぶんの横移動量 */
  --leader: radial-gradient(circle, var(--muted) 1.1px, transparent 1.6px) 0 0 / 7px 4px repeat-x;
}
@media (max-width: 720px) {
  :root { --section: 64px; }
}

/* 店側の当日ボード = 紙の台帳。明るい店内で一日読む画面なので地を反転し、書体・直角・縞・黄のボタンは同じ言葉で通す (DESIGN.md「店側」節) */
body.staff {
  color-scheme: light;
  --surface: var(--cream);
  --ink: var(--black);
  --muted: #5E5549; /* クリームの上で 5.9:1、要注意行の薄赤の地の上でも 5.4:1 (#6B6255 は薄赤の上で 4.4:1 に落ちた・#A89F8E は 1.9:1 で読めない) */
  --rule: color-mix(in srgb, var(--ink) 20%, transparent);
  --tint: color-mix(in srgb, var(--ink) 6%, var(--surface));
  --tint-2: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --leader: radial-gradient(circle, var(--muted) 1.1px, transparent 1.6px) 0 0 / 7px 4px repeat-x;
}