/*
 * FHC Design Tokens — Claude Design (Fable) v1.0 / 2026-07-11
 * 確定ブランド: パレット4a改 ／ 見出し Shippori Mincho ・ 本文 Noto Sans JP
 * base.css が参照する --fhc-color-text / --fhc-color-background /
 * --fhc-color-focus / --fhc-content-width / --fhc-space は互換のため維持。
 *
 * Breakpoints（CSSカスタムプロパティはメディアクエリに使えないため参照値）:
 *   --fhc-bp-sm: 480px / --fhc-bp-md: 768px / --fhc-bp-lg: 1024px / --fhc-bp-xl: 1280px
 */
:root {
  /* ---- color ---- */
  --fhc-color-background: #ffffff;
  --fhc-color-surface: #f1f5fa;        /* 淡パネル */
  --fhc-color-surface-strong: #e4ecf5; /* 強調パネル・hover面 */
  --fhc-color-dark: #0e2a47;           /* 濃紺セクション（Hero・フッター） */
  --fhc-color-dark-soft: #17395f;
  --fhc-color-text: #16212e;
  --fhc-color-text-muted: #52606f;     /* 白地 5.6:1 */
  --fhc-color-text-invert: #f2f7fc;
  --fhc-color-text-invert-muted: #b9c9d9; /* 濃紺地 7.4:1 */
  --fhc-color-brand-primary: #1a4c88;  /* 白地 7.9:1 */
  --fhc-color-brand-strong: #123a6b;   /* hover・本文リンク下線 */
  --fhc-color-brand-soft: #8fc0ee;     /* 濃紺地上のアクセント */
  --fhc-color-accent: #2e72ce;         /* 大きな文字・UI部品限定（白地 4.6:1） */
  --fhc-color-border: #d5dee8;
  --fhc-color-border-strong: #a9b9c9;
  --fhc-color-focus: #2e72ce;
  --fhc-color-error: #b4232a;          /* 白地 6.6:1 */
  --fhc-color-error-bg: #fbeff0;
  --fhc-color-success: #1e6b46;        /* 白地 6.3:1 */
  --fhc-color-success-bg: #edf6f1;
  --fhc-color-link: var(--fhc-color-brand-primary);
  --fhc-color-link-hover: var(--fhc-color-accent);

  /* ---- typography ---- */
  --fhc-font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --fhc-font-heading: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fhc-text-xs: 0.75rem;
  --fhc-text-sm: 0.875rem;
  --fhc-text-base: 1rem;
  --fhc-text-lg: 1.125rem;
  --fhc-text-xl: 1.375rem;
  --fhc-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --fhc-text-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem);
  --fhc-text-display: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  --fhc-leading-tight: 1.4;
  --fhc-leading-snug: 1.6;
  --fhc-leading-normal: 1.85;
  --fhc-leading-loose: 2.05;
  --fhc-weight-regular: 400;
  --fhc-weight-medium: 500;
  --fhc-weight-semibold: 600;
  --fhc-weight-bold: 700;
  --fhc-tracking-normal: 0.01em;
  --fhc-tracking-wide: 0.08em;
  --fhc-tracking-caps: 0.2em;

  /* ---- spacing (4px scale) ---- */
  --fhc-space-1: 0.25rem;
  --fhc-space-2: 0.5rem;
  --fhc-space-3: 0.75rem;
  --fhc-space-4: 1rem;
  --fhc-space-5: 1.25rem;
  --fhc-space-6: 1.5rem;
  --fhc-space-8: 2rem;
  --fhc-space-10: 2.5rem;
  --fhc-space-12: 3rem;
  --fhc-space-16: 4rem;
  --fhc-space-20: 5rem;
  --fhc-space-24: 6rem;
  --fhc-space: var(--fhc-space-4); /* base.css 互換 */

  /* ---- container ---- */
  --fhc-container-wide: 72.5rem;   /* 1160px 主コンテナ */
  --fhc-container-content: 44rem;  /* 704px 長文本文 */
  --fhc-container-form: 40rem;     /* 640px フォーム */
  --fhc-content-width: 72.5rem;    /* base.css 互換 */

  /* ---- radius / border ---- */
  --fhc-radius-sm: 4px;
  --fhc-radius-md: 8px;
  --fhc-radius-lg: 14px;
  --fhc-radius-pill: 999px;
  --fhc-border-width: 1px;
  --fhc-border-width-strong: 2px;

  /* ---- shadow ---- */
  --fhc-shadow-card: 0 1px 2px rgba(14, 42, 71, 0.06), 0 4px 16px rgba(14, 42, 71, 0.07);
  --fhc-shadow-raised: 0 2px 6px rgba(14, 42, 71, 0.1), 0 12px 32px rgba(14, 42, 71, 0.12);

  /* ---- motion ---- */
  --fhc-duration-fast: 150ms;
  --fhc-duration-base: 250ms;
  --fhc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- z-index ---- */
  --fhc-z-header: 100;
  --fhc-z-overlay: 900;
  --fhc-z-skip-link: 1000;
}