/* =====================================================================
   車の設定依頼メモ — Design Tokens
   "Quiet Precision" Editorial System  v1.0
   X Server / 静的配信前提。プレーンCSSのカスタムプロパティのみ。
   依存ゼロ。任意のフレームワークに読み込み可能。
   ===================================================================== */

:root {

  /* ---------- 1. COLOR : Base / Paper（紙・面） ---------- */
  --color-paper:          #F3EFE6; /* ページ地（ベース背景） */
  --color-paper-raised:   #FBF9F3; /* カード等の浮いた面 */
  --color-paper-sunken:   #EDE7DA; /* セクションの沈んだ面 */

  /* ---------- COLOR : Ink / Neutral（墨・文字） ---------- */
  --color-ink:            #1A1916; /* 主要テキスト・見出し */
  --color-ink-soft:       #524E45; /* 本文の補助・説明文 */
  --color-ink-faint:      #8C867A; /* キャプション・ヒント */
  --color-ink-inverse:    #FBF9F3; /* 濃色面上の文字 */

  /* ---------- COLOR : Brand（深緑＝主アクション） ---------- */
  --color-green:          #1E3A30; /* primary / リンク強調 */
  --color-green-deep:     #14271F; /* hover・active・フッター */
  --color-green-muted:    #2B5446; /* 罫・補助の緑 */

  /* ---------- COLOR : Metallic（真鍮＝装飾アクセント） ---------- */
  --color-brass:          #9A7B41; /* 数字・極細罫・小マーク（装飾用） */
  --color-brass-soft:     #B89A63; /* 真鍮の淡色（境界・hover） */

  /* ---------- COLOR : Lines（境界・罫） ---------- */
  --color-line:           #DCD5C6; /* 既定のヘアライン */
  --color-line-strong:    #C5BCA8; /* hover・強めの境界 */

  /* ---------- COLOR : Semantic（状態色 + 背景tint） ---------- */
  --color-success:        #2B6B4F;  --color-success-bg: #E3ECE6;
  --color-warning:        #8A6A2E;  --color-warning-bg: #F1E8D6;
  --color-danger:         #8A3B2E;  --color-danger-bg:  #F3E2DD;
  --color-info:           #2C5446;  --color-info-bg:    #E4EBE7;

  /* 対比メモ:
     ink / green は paper 上で AAA 級。brass は約3:1のため
     本文には使わず、大きな数字・装飾・ヘアライン専用とする。 */

  /* ---------- 2. TYPOGRAPHY : Families ---------- */
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;       /* 見出し（明朝・格） */
  --font-sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; /* 本文・UI */
  --font-latin: "Fraunces", Georgia, "Times New Roman", serif;                        /* 英字・数字・overline */
  --font-mono:  "Fraunces", ui-monospace, monospace;                                  /* 品番・コード表示 */

  /* TYPOGRAPHY : Type scale（size / line-height） */
  --fs-display:  clamp(2.375rem, 1.4rem + 4vw, 4.75rem); --lh-display: 1.16; /* H1 38–76px */
  --fs-h2:       clamp(1.625rem, 1.1rem + 2vw, 2.5rem);  --lh-h2: 1.3;       /* 26–40px */
  --fs-h3:       1.1875rem; --lh-h3: 1.5;   /* 19px */
  --fs-h4:       1rem;      --lh-h4: 1.6;   /* 16px */
  --fs-body-lg:  1.0625rem; --lh-body-lg: 2.0;   /* 17px */
  --fs-body:     1rem;      --lh-body: 1.95;      /* 16px */
  --fs-body-sm:  0.875rem;  --lh-body-sm: 1.9;    /* 14px */
  --fs-caption:  0.75rem;   --lh-caption: 1.6;    /* 12px */
  --fs-overline: 0.75rem;   --ls-overline: 0.34em; /* eyebrow: 12px / 大字間 */

  /* TYPOGRAPHY : Weights（2階調運用） */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-display: 700; /* 明朝見出しのみ強め可 */

  /* ---------- 3. SPACING（8pt基準スケール） ---------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-section: clamp(4rem, 8.5vw, 7.25rem); /* セクション上下余白 */

  /* LAYOUT : Container / Grid */
  --container:     1180px;
  --container-text: 720px; /* 読み物の最適行長 */
  --gutter:        clamp(1.25rem, 5vw, 4.5rem);
  --grid-columns:  12;
  --grid-gap:      clamp(1.25rem, 2.5vw, 2rem);

  /* BREAKPOINTS（参照用・JSと共有） */
  --bp-sp:     620px;
  --bp-tablet: 980px;
  --bp-pc:     1180px;

  /* ---------- 4a. RADIUS（エディトリアル＝小さめ） ---------- */
  --radius-none: 0;
  --radius-sm:   2px;   /* 既定（ボタン・入力・チップ） */
  --radius-md:   4px;   /* カード等 */
  --radius-pill: 999px; /* 限定使用 */
  --radius-circle: 50%;

  /* 4b. BORDER */
  --border-width: 1px;
  --border-hair:    var(--border-width) solid var(--color-line);
  --border-strong:  var(--border-width) solid var(--color-line-strong);
  --border-accent:  2px solid var(--color-green); /* 選択・回答済みの左罫 */

  /* 4c. ELEVATION / SHADOW（低く・大きくぼかす控えめ設計） */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26,25,22,0.04);             /* かすかな浮き */
  --shadow-2: 0 18px 40px -38px rgba(26,25,22,0.50);     /* カードhover */
  --shadow-3: 0 30px 60px -44px rgba(26,25,22,0.55);     /* 浮きパネル */
  --shadow-green: 0 30px 60px -44px rgba(20,39,31,0.80); /* 緑パネル用 */

  /* ---------- 5. MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.25s;
  --dur-slow: 0.8s;  /* スクロール演出 */

  /* ---------- 6. Z-INDEX ---------- */
  --z-base: 1;
  --z-sticky-toolbar: 30;
  --z-header: 50;
  --z-menu: 60;
  --z-toast: 99;

  /* ---------- 7. COMPONENT TOKENS（意味づけ別名） ---------- */
  --btn-padding-y: 14px;  --btn-padding-x: 26px;
  --btn-padding-y-sm: 9px; --btn-padding-x-sm: 16px;
  --control-height: 48px;     /* 入力・主要ボタンの最低高 */
  --control-height-sm: 38px;
  --tap-target-min: 44px;     /* SPの最小タップ領域 */
  --card-padding: clamp(1.5rem, 2.2vw, 1.75rem);
  --focus-ring: 0 0 0 3px rgba(30,58,48,0.28); /* キーボードフォーカス */
}

/* ---------- 任意: ダーク反転が必要なら上書き用フック ---------- */
/* @media (prefers-color-scheme: dark) { :root { ... } }  ※本システムは
   意図的に固定の明（紙）テーマ。必要時のみ別トークンを定義する。 */