/* ============================================================
   design-rules v2.0 — tokens.css（2026-07-07 FIX）
   使い方: <html data-tone="light" data-color="green"> のように
   ルート要素に data-tone / data-color を1つずつ指定する。
   トーン: light | dark | trust | slight | sdark | swa
   カラー: green | red | blue
   ============================================================ */

/* ---------- 共通（不変） ---------- */
:root{
  --notice-bg:#FFF9E5; --notice-ink:#7A6300; --notice-tag:#E6A700;
  --fs-h1:34px; --fs-h2:26px; --fs-h3:21px; --fs-btn:18px;
  --fs-body:16px; --fs-note:14px; --fs-num-lg:26px;
  --sp-1:8px; --sp-2:13px; --sp-3:21px; --sp-4:34px; --sp-5:55px;
  --font:'Noto Sans JP',sans-serif;
}

/* ---------- キーカラー ---------- */
[data-color="green"]{
  --key:#8FC31F; --key-deep:#578A00; --key-pale:#F2F8E6; --key-mid:#4E9B3B;
  --key-text:#578A00;
  --key-text-on-dark:#B5D96A; --key-pale-on-dark:#2E3A1D;
  --cta:#EF8200; --cta-shadow:#C96D00; --cta-hover:#F79420;
}
[data-color="red"]{ /* CTAはキー赤との同化を避け琥珀 */
  --key:#D6453A; --key-deep:#A32B21; --key-pale:#FBEFED; --key-mid:#C24237;
  --key-text:#A32B21;
  --key-text-on-dark:#F0918A; --key-pale-on-dark:#3D2422;
  --cta:#F5A200; --cta-shadow:#C27F00; --cta-hover:#FFB423;
}
[data-color="blue"]{
  --key:#2D8FD5; --key-deep:#1668A8; --key-pale:#EDF5FB; --key-mid:#3E7FB8;
  --key-text:#1668A8;
  --key-text-on-dark:#7FC3EE; --key-pale-on-dark:#1E2E3D;
  --cta:#EF8200; --cta-shadow:#C96D00; --cta-hover:#F79420;
}

/* ---------- トーン ---------- */
/* 注釈色ルール（2026-07-19 AZAMI指示）:
   --ink-note は本文色 --ink と同一値。注釈は fs-note のサイズ差のみで表現し、
   色を薄くしない（薄い注釈は全く目に入らないため）。 */
[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;
  --font-head:'Noto Sans JP',sans-serif;
}
[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;
  --font-head:'Noto Sans JP',sans-serif;
  /* ダーク合成: キー文字色は明色版・淡色面は暗色ティント */
  --key-text:var(--key-text-on-dark);
  --key-pale:var(--key-pale-on-dark);
}
[data-tone="trust"]{ /* 角丸0・影なし・装飾数字/パルス/カウントアップ禁止 */
  --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:0px; --radius-btn:0px; --radius-badge:0px;
  --btn-shadow:none;
  --alert:#D33A2C;
  --font-head:'Noto Sans JP',sans-serif;
}
[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:0px; --radius-btn:0px; --radius-badge:0px;
  --btn-shadow:none;
  --alert:#D33A2C;
  --font-head:'Noto Serif JP',serif;
}
[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:0px; --radius-btn:0px; --radius-badge:0px;
  --btn-shadow:none;
  --alert:#FF7B6E;
  --font-head:'Noto Serif JP',serif;
  --key-text:var(--key-text-on-dark);
  --key-pale:var(--key-pale-on-dark);
}
[data-tone="swa"]{ /* 和モダン: 生成り地に白カード */
  --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:0px; --radius-btn:0px; --radius-badge:0px;
  --btn-shadow:none;
  --alert:#D33A2C;
  --font-head:'Shippori Mincho B1',serif;
}

/* ---------- ベース ---------- */
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.9;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.5; color:var(--ink); }
a{ color:var(--key-text); }