/* SecureArc の見た目の値の唯一の編集元（SOP §3）。値を変えるときはここだけを直す。
   型はヤチヨのデモ 案3c（線は 1px の薄い線＋48px の差し色の線・余白は clamp の大きめ・カードは角丸 14px の枠＋hover で色の枠）。
   色はセキュリティ診断向けに、冷たい灰（黒なし）と青緑で選び直した（対比は値の横に記す。WCAG 2.x の式）。 */
:root {
  /* 色 */
  --sa-bg: #ffffff;
  --sa-bg-2: #eef1f4;            /* 区画を替える地 */
  --sa-surface-2: #f5f7f9;       /* 行の見出し・囲み */
  --sa-text: #26323d;            /* 本文（白と 12.6:1・#eef1f4 と 11.1:1） */
  --sa-muted: #56616d;           /* 補足（白と 6.3:1・#eef1f4 と 5.6:1） */
  --sa-line: rgba(38, 50, 61, .12);
  --sa-line-strong: rgba(38, 50, 61, .28);
  --sa-primary: #0b6e79;         /* ボタンの地（白文字 5.9:1） */
  --sa-primary-hover: #08545c;   /* （白文字 8.3:1） */
  --sa-accent: #0a5f67;          /* 小さい差し色の文字（白と 7.2:1・#eef1f4 と 6.4:1） */
  --sa-cyan: #2bb3c0;            /* 線・光だけ。文字に使わない */
  --sa-grad: linear-gradient(100deg, #0b6e79 0%, #1595a3 50%, #2bb3c0 100%);
  --sa-charcoal: #2a3642;        /* Hero・帯・Footer の地（灰。黒は使わない。白文字 12.0:1） */
  --sa-on-dark: #ffffff;
  --sa-on-dark-muted: #c9d3dc;   /* 濃い地の補足（#2a3642 と 8.6:1） */
  --sa-sev-critical: #8b1a1a;
  --sa-sev-high: #b33c00;
  --sa-sev-medium: #8a6100;
  --sa-sev-low: #1f5f99;
  --sa-sev-info: #4a5563;
  --sa-note-bg: #fff8e6;
  --sa-note-line: #ecd9a8;

  /* 文字 */
  --sa-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", Meiryo, system-ui, sans-serif;
  --sa-fs-body: 16px;
  --sa-fs-small: 14px;
  --sa-fs-label: 13px;
  --sa-lh-body: 1.85;
  --sa-ls-body: .04em;
  --sa-fs-hero: clamp(28px, 3.5vw, 50px);
  --sa-fs-h1: clamp(28px, 3.4vw, 46px);
  --sa-fs-h2: clamp(26px, 2.8vw, 40px);
  --sa-fs-h3: clamp(18px, 1.5vw, 21px);
  --sa-fw-h2: 300;               /* 区画の見出しは細く広く（案3c） */
  --sa-ls-h2: .08em;

  /* 余白 */
  --sa-container: 1200px;
  --sa-narrow: 820px;
  --sa-gutter: clamp(20px, 4vw, 48px);
  --sa-section: clamp(80px, 9vw, 136px);
  --sa-gap: 24px;
  --sa-radius: 14px;
  --sa-radius-s: 8px;
  --sa-header-h: 76px;

  /* 動き */
  --sa-ease: cubic-bezier(.22, .8, .2, 1);
}