/*
  部品の色・角丸・書体の差し込み口（トークン）
  ------------------------------------------------------------
  部品のCSSはすべてこの変数だけを見る。色を変えたいときは、下の :root の値を書き換えるだけでよい。
  用意したトーン（あおば・元気堂・そらまめ）を使うときは、部品の外側（body など）に data-fhp-tone="aoba" などを付ける。
    --fhp-bg        地の色
    --fhp-fg        文字の色（地に対し 4.5:1 以上）
    --fhp-muted     補助の文字（地に対し 4.5:1 以上）
    --fhp-line      飾りの区切り線（弱くてよい）
    --fhp-edge      押せる物の枠線（地に対し 3:1 以上。WCAG 1.4.11）
    --fhp-accent    差し色。ボタンの塗り・印・選んだ状態だけに使う（地に対し 4.5:1 以上）
    --fhp-on-accent 差し色の上の文字（4.5:1 以上）
    --fhp-shade     写真を拡大したときの暗い地（白い文字が乗る）
    --fhp-radius    大きい枠の角丸   --fhp-radius-s  ボタンなど小さい物の角丸
    --fhp-display   見出しの書体     --fhp-body      本文の書体
*/
:root {
  --fhp-bg: #FFFFFF;
  --fhp-fg: #1D1D1F;
  --fhp-muted: #6E6E73;
  --fhp-line: #D2D2D7;
  --fhp-edge: #86868B;
  --fhp-accent: #1B6B44;
  --fhp-on-accent: #FFFFFF;
  --fhp-shade: #1D1D1F;
  --fhp-radius: 14px;
  --fhp-radius-s: 10px;
  --fhp-display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --fhp-body: var(--fhp-display);
}

/* 純喫茶 あおば: 暗い木の地・象牙色の文字・ランプの琥珀。角は立てる */
[data-fhp-tone="aoba"] {
  --fhp-bg: #221812;
  --fhp-fg: #EFE3CB;
  --fhp-muted: #C9BBA2;
  --fhp-line: rgba(239, 227, 203, .24);
  --fhp-edge: #7D6E5A;
  --fhp-accent: #E4B96A;
  --fhp-on-accent: #221812;
  --fhp-shade: #140E0A;
  --fhp-radius: 0px;
  --fhp-radius-s: 0px;
  --fhp-display: "Kaisei Decol", "Hiragino Mincho ProN", serif;
  --fhp-body: "Zen Kaku Gothic Antique", "Hiragino Sans", sans-serif;
  color-scheme: dark;
}

/* からだ元気堂: 白地・システムフォント・観葉植物の緑。角は丸い（Apple HIG 寄り） */
[data-fhp-tone="genkido"] {
  color-scheme: light;
  --fhp-bg: #FFFFFF;
  --fhp-fg: #1D1D1F;
  --fhp-muted: #6E6E73;
  --fhp-line: #D2D2D7;
  --fhp-edge: #86868B;
  --fhp-accent: #1B6B44;
  --fhp-on-accent: #FFFFFF;
  --fhp-shade: #1D1D1F;
  --fhp-radius: 14px;
  --fhp-radius-s: 10px;
  --fhp-display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --fhp-body: var(--fhp-display);
}

/* そらまめ焙煎所: 白地・深煎りの茶・クラフト紙。見出しは明朝、角はわずかに */
[data-fhp-tone="soramame"] {
  color-scheme: light;
  --fhp-bg: #FFFFFF;
  --fhp-fg: #3B2B20;
  --fhp-muted: #6F6053;
  --fhp-line: #E6DAC6;
  --fhp-edge: #9C8466;
  --fhp-accent: #7A5230;
  --fhp-on-accent: #FFFFFF;
  --fhp-shade: #2A1F17;
  --fhp-radius: 4px;
  --fhp-radius-s: 3px;
  --fhp-display: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --fhp-body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

/* 部品の共通の土台。部品の一番外側に .fhp を付ける */
.fhp {
  color: var(--fhp-fg);
  font-family: var(--fhp-body);
  font-feature-settings: "palt" 1;
}
.fhp *, .fhp *::before, .fhp *::after { box-sizing: border-box; }
.fhp :focus-visible { outline: 2px solid var(--fhp-accent); outline-offset: 3px; }
.fhp .fhp-nw { white-space: nowrap; }
/* 部品の中で display を指定していても、hidden を付けた物は必ず隠す */
.fhp [hidden] { display: none !important; }
/* 見本の BudouX（文節の途中で改行しない）に合わせ、フォームやボタンの文字も同じ折り返し方にする。
   文は <span> に入れておくと、BudouX が文節の区切りを入れる */
.fhp legend, .fhp label, .fhp summary, .fhp button, .fhp .fhp-btn {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
.fhp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 部品で使うボタンの共通形。塗り（主）と枠（副）の2種類だけ */
.fhp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .55em 1.3em;
  border: 1px solid var(--fhp-accent);
  border-radius: var(--fhp-radius-s);
  background: var(--fhp-accent);
  color: var(--fhp-on-accent);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.fhp-btn:hover { text-decoration: underline; text-underline-offset: .25em; }
.fhp-btn--sub {
  border-color: var(--fhp-edge);
  background: transparent;
  color: var(--fhp-fg);
}
.fhp-btn svg { flex: none; width: 1.15em; height: 1.15em; }
.fhp-btn[hidden] { display: none; }