/* ============================================================
   tokens.css — デザイントークン（:root CSS変数）
   サンプル行政書士事務所 サンプルHP / Navy×Gold / corporate ベース
   生値の直書きは禁止。常にセマンティック変数を参照すること。
   ============================================================ */
:root {
  /* ---- color（CLAUDE.md準拠 / Navy×Gold） ---- */
  --color-primary: #1e3a5f;
  --color-primary-dark: #152743;
  --color-primary-light: #2c4f7c;
  --color-accent: #c19a4e;
  --color-accent-soft: #e7d6b0;
  /* 明色背景の小さなテキスト用（白地で約5:1, WCAG AA達成）。装飾線/背景はaccentを使用 */
  --color-accent-ink: #8a6a23;

  --color-surface: #ffffff;
  --color-bg: #f4f7fb;
  --color-bg-alt: #eef3f9;
  --color-text: #1c2531;
  --color-text-sub: #5f6b7a;
  --color-text-faint: #6b7480;
  --color-border: #e3e9f1;
  /* フォーム部品の境界（白地で3:1以上, WCAG 1.4.11 非テキスト対応） */
  --color-control-border: #8a94a3;

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;

  /* ---- DV支援ページ用ソフトトーン（body[data-theme="soft"] で上書き） ---- */
  --soft-primary: #4a6b8a;
  --soft-primary-dark: #3a5874;
  --soft-accent: #7fa6a0;
  --soft-accent-soft: #d6e5e2;
  --soft-bg: #f7f9fb;
  --soft-surface: #ffffff;

  /* ---- typography ---- */
  --font-head: "Poppins", "Noto Serif JP", serif;
  --font-body: "Open Sans", "Noto Sans JP", sans-serif;

  --fs-hero: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.5rem, 3.2vw, 2rem);
  --fs-h3: clamp(1.15rem, 2.2vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.3;
  --lh-base: 1.8; /* 日本語可読性 */

  /* ---- spacing = 8ptグリッド ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* ---- radius / shadow / container ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 14px rgba(20, 40, 70, 0.08);
  --shadow-card-hover: 0 10px 28px rgba(20, 40, 70, 0.14);
  --shadow-header: 0 1px 0 rgba(20, 40, 70, 0.06), 0 4px 16px rgba(20, 40, 70, 0.05);

  --container: 1120px;
  --container-narrow: 760px;

  /* ---- transitions / z-index ---- */
  --transition: 180ms ease;
  --z-header: 100;
  --z-drawer: 200;
}