/* ==========================================================================
   tokens.css — デザイントークン（単一情報源は ../../DESIGN.md）
   このファイルの値を変えたら DESIGN.md も更新する。
   WordPress 移行時はこのファイルをそのままテーマに移植する。
   ========================================================================== */

:root {
  /* ---- カラー（requirements.md 確定6色 ＋ preview 派生色）---- */
  --color-accent:        #C8292A; /* 赤・主要CTA・強調（対白 5.5:1） */
  --color-accent-dark:   #A01F20; /* hover/active・グラデ下端 */
  --color-accent-light:  #E03535; /* hover ハイライト */

  --color-bg:            #FFFFFF; /* 基本背景 */
  --color-surface:       #F8F4F1; /* オフホワイト・面 */
  --color-surface-2:     #F0EAE5;
  --color-surface-3:     #E8DDD6;

  --color-dark:          #1A0F0F; /* 濃色背景・フッター */
  --color-dark-2:        #2C1E1E;

  --color-text:          #1A1010; /* 本文（対白 18.7:1） */
  --color-text-muted:    #7A6060; /* 補助（対白 5.7:1） */
  --color-text-muted-2:  #A89090; /* 装飾/大サイズ太字限定（対白 3.1:1・本文NG） */

  --color-gold:          #B8862A; /* 権威付けの差し色・限定使用 */
  --color-border:        #E0D4CC; /* 区切り線・カード枠 */

  /* ---- タイポグラフィ ---- */
  --font-serif: 'Noto Serif JP', serif;   /* 見出し */
  --font-sans:  'Noto Sans JP', sans-serif;/* 本文・UI */
  --font-num:   'Montserrat', sans-serif;  /* 数字・英字 */

  /* サイズ（h1 は制作中に確定 → DESIGN.md も更新） */
  --fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);  /* 36–52px（FV1画面収容のため）*/
  --fs-h2: 2rem;                          /* 32px */
  --fs-h3: 1.375rem;                      /* 22px */
  --fs-body: 1rem;                        /* 16px */
  --fs-caption: 0.8125rem;                /* 13px */

  --lh-tight: 1.3;
  --lh-heading: 1.4;
  --lh-body: 1.7;

  /* ---- スペーシング（4/8px ベース）---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---- レイアウト ---- */
  --gutter: 48px;          /* PC 左右余白（ガター）*/
  --gutter-sp: 20px;       /* SP 左右余白 */
  --content: 1280px;       /* 統一コンテンツ最大幅（ヘッダー・MV・各セクション共通）*/
  --content-box: calc(var(--content) + var(--gutter) * 2); /* ガターを含む外箱 = 1376px */
  /* 後方互換エイリアス（旧名を参照中の箇所のため。順次 --content / --content-box に統一）*/
  --container: var(--content-box);
  --container-wide: var(--content-box);

  /* ---- 角丸・シャドウ・ボーダー ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;
  --shadow-card:       0 2px 16px rgba(200, 41, 42, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-cta:        0 4px 24px rgba(200, 41, 42, 0.30);
  --border-width: 1px;

  /* ---- z-index ---- */
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* ---- モーション ---- */
  --transition: 200ms ease-out;
}