/* ============================================================
   AKIRA版デザイントークン v1.1（2026-07-31）
   出典: 浅見パック web/tokens.css の構造を借用し、中身をAKIRA基準へ差し替え
   使い方: <html data-tone="light" data-color="rv"> のように2つ宣言する
   v1.1: トーンを3種→6種に戻し、事業3つ（美容室アトランティス／秩父表参道Lab.／GETCLUB）を追加
   ============================================================ */

/* ------------------------------------------------------------
   1. 全パターン共通（変更しない）
   ------------------------------------------------------------ */
:root {
  /* 文字サイズ ── AKIRA基準：本文17px・注釈15px（これより小さくしない） */
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-btn: 19px;
  --fs-body: 17px;
  --fs-note: 15px;
  --fs-num-lg: 28px;

  /* 余白（フィボナッチ） */
  --sp-1: 8px;
  --sp-2: 13px;
  --sp-3: 21px;
  --sp-4: 34px;
  --sp-5: 55px;

  /* 通知イエロー（通知専用）
     ※GETCLUB はキーカラーが黄色で衝突するため、下の [data-color="gc"] で上書きする */
  --notice-bg: #FFF9E5;
  --notice-ink: #7A6300;
  --notice-tag: #E6A700;

  /* キー色の面に載せる文字色（既定は白抜き。黄色など明るいキー色の事業だけ差し替える） */
  --on-key: #FFFFFF;
  /* 申込ボタンの上に載せる文字色 */
  --on-cta: #FFFFFF;

  /* バッジ・タグなど小さな部品の内側余白（レイアウト用のフィボナッチとは別枠） */
  --sp-chip-y: 4px;
  --sp-chip-x: 13px;

  /* 書体（既定。明朝系トーンだけ見出しを差し替える） */
  --font: 'Noto Sans JP', sans-serif;
  --font-head: 'Noto Sans JP', sans-serif;
}

/* 見出しだけ画面幅で伸縮させる。本文17px・注釈15pxは固定 */
@media (max-width: 768px) {
  :root {
    --fs-h1: clamp(28px, 7vw, 36px);
    --fs-h2: clamp(23px, 5.5vw, 28px);
  }
}

/* ============================================================
   2. トーン（用途で1つ選ぶ・全6種）
   ============================================================ */

/* light ── ライト（標準）。集客サイト・LP・サービス紹介。迷ったらこれ */
[data-tone="light"] {
  --surface: #FFFFFF;
  --alt: #FAFAF8;
  --card: #FFFFFF;
  --ink: #333333;
  --ink-sub: #555555;
  --ink-note: #333333;      /* 注釈は本文と同色。サイズだけ小さくする */
  --rule: #DDDDDD;
  --rule-strong: #C9C9C9;
  --divider: #E5E5E5;
  --photo-bg: #F5F5F0;
  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-badge: 3px;
  --btn-shadow: 0 2px 0 var(--cta-shadow);
  --alert: #D33A2C;
}

/* dark ── ダーク。夜に見るツール・業務ダッシュボード・テック系の提案。純黒は使わない */
[data-tone="dark"] {
  --surface: #2D2D2D;
  --alt: #262626;
  --card: #383838;
  --ink: rgba(255, 255, 255, .85);
  --ink-sub: rgba(255, 255, 255, .65);
  --ink-note: rgba(255, 255, 255, .85);
  --rule: rgba(255, 255, 255, .18);
  --rule-strong: rgba(255, 255, 255, .28);
  --divider: rgba(255, 255, 255, .12);
  --photo-bg: #1F1F1F;
  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-badge: 3px;
  --btn-shadow: 0 2px 0 var(--cta-shadow);
  --alert: #FF7B6E;
}

/* trust ── トラスト。管理ツール・報告書系の画面・行政/医療むけ。角丸0・影0・装飾なし */
[data-tone="trust"] {
  --surface: #FFFFFF;
  --alt: #F2F2F2;
  --card: #FFFFFF;
  --ink: #333333;
  --ink-sub: #555555;
  --ink-note: #333333;
  --rule: #CCCCCC;
  --rule-strong: #B5B5B5;
  --divider: #E0E0E0;
  --photo-bg: #F2F2F2;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-badge: 0;
  --btn-shadow: none;
  --alert: #D33A2C;
}

/* slight ── 明朝ライト。上品に見せたい宿泊・美容・医療、誠実な採用。見出しだけ明朝・角丸0 */
[data-tone="slight"] {
  --surface: #FFFFFF;
  --alt: #F8F5F0;
  --card: #FFFFFF;
  --ink: #404040;
  --ink-sub: #666666;
  --ink-note: #404040;
  --rule: #DDDDDD;
  --rule-strong: #C9C9C9;
  --divider: #E5E5E5;
  --photo-bg: #F5F5F0;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-badge: 0;
  --btn-shadow: none;
  --alert: #D33A2C;
  --font-head: 'Noto Serif JP', serif;
}

/* sdark ── 明朝ダーク。静けさを出したい提案・映像/空間系。ダークの決まり＋明朝見出し */
[data-tone="sdark"] {
  --surface: #2D2D2D;
  --alt: #262626;
  --card: #383838;
  --ink: rgba(255, 255, 255, .85);
  --ink-sub: rgba(255, 255, 255, .65);
  --ink-note: rgba(255, 255, 255, .85);
  --rule: rgba(255, 255, 255, .18);
  --rule-strong: rgba(255, 255, 255, .28);
  --divider: rgba(255, 255, 255, .12);
  --photo-bg: #1F1F1F;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-badge: 0;
  --btn-shadow: none;
  --alert: #FF7B6E;
  --font-head: 'Noto Serif JP', serif;
}

/* wa ── 和モダン。秩父・宿・和文化・地域もの。生成り地＋墨色＋明朝見出し */
[data-tone="wa"] {
  --surface: #F8F5F0;
  --alt: #F1ECE3;
  --card: #FFFFFF;
  --ink: #3F3A35;
  --ink-sub: #6E6759;
  --ink-note: #3F3A35;
  --rule: #C9C2B6;
  --rule-strong: #B3AA9B;
  --divider: #DDD6C9;
  --photo-bg: #EAE5DC;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-badge: 0;
  --btn-shadow: none;
  --alert: #D33A2C;
  --font-head: 'Shippori Mincho B1', serif;
}

/* ============================================================
   3. キーカラー（事業で1つ選ぶ）

   --key        … 文字を載せない装飾（カード上端の細いライン・区切りの点）用
                  ※文字を載せる面には使わない。rv・lab で17pxの文字が読めなくなる
   --key-deep   … 文字を載せる面（帯・バッジ・押下状態のボタン）用。文字は --on-key
   --key-text   … 文字に使う版（白地でコントラスト比4.5:1以上を確認済み）
   --key-light  … ダーク系トーンで文字に使う版（暗い地の上で読める明るさ）
   --key-pale   … ごく薄い面（明るいトーン用）
   --key-pale-dark … 淡色面のダーク系トーン版
   --cta        … 申込ボタン専用色。装飾には流用しない
   ============================================================ */

/* rv ── Rei Village（アンバー）※reivillage.jp の実装から採用 */
[data-color="rv"] {
  --key: #C4860A;
  --key-deep: #8A5E07;
  --key-text: #8A5E07;
  --key-light: #E8B75E;
  --key-pale: #FAF6EE;
  --key-pale-dark: #3A2E14;
  --key-mid: #D4A045;
  --cta: #C4860A;
  --cta-hover: #D4A045;
  --cta-shadow: #8A5E07;
}

/* atl ── アトランティスシリーズ（賃貸）ネイビー ※入間LPの実装から採用 */
[data-color="atl"] {
  --key: #1B2A4E;
  --key-deep: #121D37;
  --key-text: #1B2A4E;
  --key-light: #8FA8D8;
  --key-pale: #F5F4EF;
  --key-pale-dark: #1E2739;
  --key-mid: #B5894A;       /* 副色ゴールド。装飾の点にだけ使う */
  --cta: #B5894A;
  --cta-hover: #C79E60;
  --cta-shadow: #8A672F;
}

/* atls ── 美容室アトランティス（髪育）えんじ
   ※hairsalon-atlantis.jp/kamiiku/ の実装から採用
     観測値: 主要面・リンク #660000 ／ 強調文字 #B85C00 ／ 生成り地 #F5EFE6・#EFE6D3 ／ 墨 #2A1F17
     サイトは明朝主体なので slight（明朝ライト）または wa（和モダン）と相性がよい */
[data-color="atls"] {
  --key: #660000;
  --key-deep: #4A0000;
  --key-text: #660000;
  --key-light: #E39A9A;
  --key-pale: #F5EFE6;
  --key-pale-dark: #331A1A;
  --key-mid: #B85C00;       /* 副色の琥珀。観測値そのまま */
  --cta: #B85C00;
  --cta-hover: #D06B0A;
  --cta-shadow: #8A4400;
}

/* lab ── 秩父表参道Lab.／SKYLOUNGE（グリーン）
   ※chichibu-lab.jp の実装から採用
     観測値: リンク・見出し #238C00 ／ 地は濃いチャコール #222222（サイト全体がダーク基調）
     #238C00 は白地で4.35:1と基準にわずかに届かないため、文字用は #1F8000（5.1:1）を使う
     申込ボタンは緑と同化しないよう、浅見パックの緑プリセットに倣って琥珀を使う */
[data-color="lab"] {
  --key: #238C00;
  --key-deep: #1B6B00;
  --key-text: #1F8000;
  --key-light: #7FD35A;
  --key-pale: #EFF6EA;
  --key-pale-dark: #1E2A18;
  --key-mid: #4FA82E;
  /* 申込ボタンは緑と同化しないよう琥珀。白抜き文字が読める濃さ（3.7:1）に落としている */
  --cta: #C96D00;
  --cta-hover: #E07C0A;
  --cta-shadow: #9E5500;
}

/* gc ── 株式会社GETCLUB（イエロー）
   ※get-club.net の実装から採用
     観測値: ロゴ #FFE100（＋濃い縁 #C49600）／ 強調文字 #FF3F00 ／ ボタン橙 #FFA94B
             リンク青 #0098FF ／ クリーム地 #F5EBD9・#F1E9D8
     黄色は文字に使えないため、文字用は同系の濃い琥珀 #8A6A00（5.1:1）を使う
     申込ボタンは観測された赤橙を白抜きが読める濃さに寄せた #E63900 */
[data-color="gc"] {
  --key: #FFE100;
  --key-deep: #C49600;
  --key-text: #8A6A00;
  --key-light: #FFE96B;
  --key-pale: #FFFBE5;
  --key-pale-dark: #332E14;
  --key-mid: #FFA94B;
  --cta: #E63900;
  --cta-hover: #FF5019;
  --cta-shadow: #A62800;
  /* 黄色い帯の上に白文字は読めないため、キー色の面に載せる文字は墨色にする
     （#FFE100 上で4.6:1、#C49600 上で4.6:1。申込ボタンは濃い赤橙なので白のまま） */
  --on-key: #333333;
  --on-cta: #FFFFFF;
  /* キーが黄色で通知イエローと衝突するため、GETCLUBの通知だけ無彩色に逃がす */
  --notice-bg: #F1F1F1;
  --notice-ink: #333333;
  --notice-tag: #555555;
}

/* ============================================================
   4. ダーク系トーンでのキー色の置き換え（必須）
   暗い地の上では濃いキー色の文字が読めないため、明るい版に差し替える
   ============================================================ */
[data-tone="dark"][data-color="rv"],   [data-tone="sdark"][data-color="rv"],
[data-tone="dark"][data-color="atl"],  [data-tone="sdark"][data-color="atl"],
[data-tone="dark"][data-color="atls"], [data-tone="sdark"][data-color="atls"],
[data-tone="dark"][data-color="lab"],  [data-tone="sdark"][data-color="lab"],
[data-tone="dark"][data-color="gc"],   [data-tone="sdark"][data-color="gc"] {
  --key-text: var(--key-light);
  --key-pale: var(--key-pale-dark);
}

/* ------------------------------------------------------------
   まだ決まっていない事業（作るときにAKIRAさんと決めてから追加する）
     ・美容室 ビューティ
     ・ちちぶホステル（下の chc は予約ダッシュボードからの暫定値・要確認）
   決まっていない色を推測で埋めない。
   ------------------------------------------------------------ */

/* chc ── ちちぶホステル（ブルー）※予約ダッシュボードから暫定採用・要確認 */
[data-color="chc"] {
  --key: #2F6F9F;
  --key-deep: #1F4A6B;
  --key-text: #2F6F9F;
  --key-light: #7FC3EE;
  --key-pale: #EDF4FA;
  --key-pale-dark: #1E2E3D;
  --key-mid: #4E8CB8;
  /* 申込ボタンは青と同化しないよう琥珀。白抜き文字が読める濃さ（3.7:1） */
  --cta: #C96D00;
  --cta-hover: #E07C0A;
  --cta-shadow: #9E5500;
}

[data-tone="dark"][data-color="chc"], [data-tone="sdark"][data-color="chc"] {
  --key-text: var(--key-light);
  --key-pale: var(--key-pale-dark);
}