/*
 * DRAMAP Design Tokens
 * DRAMAP マップ本体 (api/public/map.css) と同じ数値・色を集中管理。
 * すべてのスタイルはここで定義された CSS Custom Properties を参照する。
 */

:root {
  /* ─── Color: Text / Ink ─── */
  --dra-text:          #1f2937;   /* 本文 */
  --dra-text-strong:   #111827;   /* 強調・見出し */
  --dra-text-muted:    #6b7280;   /* 補足・キャプション */
  --dra-text-subtle:   #4b5563;   /* サブ本文 */
  --dra-text-inverse:  #ffffff;   /* 反転 (ダーク背景上) */

  /* ─── Color: Surface ─── */
  --dra-bg:            #ffffff;   /* ベース */
  --dra-bg-alt:        #f9fafb;   /* パネル */
  --dra-bg-panel:      #f3f4f6;   /* 二次パネル / 注記 */
  --dra-bg-dark:       #1f2937;   /* ダークセクション */

  /* ─── Color: Border ─── */
  --dra-border:        #e5e7eb;
  --dra-border-strong: #d1d5db;

  /* ─── Color: Accent (CTA / 強調) ─── */
  --dra-accent:        #dc2626;   /* 主要 CTA / 強調赤 */
  --dra-accent-hover:  #b91c1c;
  --dra-accent-soft:   #fca5a5;

  /* ─── Color: Semantic ─── */
  --dra-link:          #111827;
  --dra-link-hover:    #000000;
  --dra-focus-ring:    #93c5fd;   /* focus outline */

  /* ─── Radius ─── */
  --dra-radius-sm:     4px;
  --dra-radius-md:     6px;   /* 入力欄・ボタン */
  --dra-radius-lg:     8px;   /* カード・callout */
  --dra-radius-pill:   999px;

  /* ─── Spacing (8px scale) ─── */
  --dra-space-1:       4px;
  --dra-space-2:       8px;
  --dra-space-3:       12px;
  --dra-space-4:       16px;
  --dra-space-5:       24px;
  --dra-space-6:       32px;
  --dra-space-7:       48px;
  --dra-space-8:       64px;
  --dra-space-9:       96px;

  /* ─── Typography ─── */
  --dra-font-body:     -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --dra-font-serif:    "EB Garamond", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --dra-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --dra-fs-xs:         12px;
  --dra-fs-sm:         13px;
  --dra-fs-base:       15px;   /* 本文既定 */
  --dra-fs-md:         17px;   /* サブ見出し */
  --dra-fs-lg:         20px;
  --dra-fs-xl:         24px;
  --dra-fs-2xl:        32px;   /* 見出し */
  --dra-fs-3xl:        40px;   /* ヒーロー */
  --dra-fs-4xl:        56px;

  --dra-lh-tight:      1.3;
  --dra-lh-normal:     1.7;
  --dra-lh-relaxed:    1.9;

  /* ─── 本文の読み幅 (measure) ───
     日本語は 1 行 35〜45 文字が読みやすい。15px / letter-spacing .06em では
     約 700px がその範囲に収まる。セクションの幅 (最大 1010px) はそのままに、
     本文だけこの幅で折り返す。 */
  --dra-measure: 700px;

  /* ─── 蛍光マーカー ───
     太字の強調に敷く帯の色。 */
  --dra-marker:        #ff0;

  /* ─── Layout ─── */
  --dra-container:         960px;   /* 通常セクション */
  --dra-container-narrow:  720px;   /* 本文・フォーム */
  --dra-container-wide:    1200px;  /* ヒーロー・広告 */

  /* ─── Elevation ─── */
  --dra-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --dra-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.12);
  --dra-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.16);

  /* ─── Motion ─── */
  --dra-transition:    0.15s ease;
  --dra-transition-slow: 0.3s ease;

  /* ─── Z-index scale ─── */
  --dra-z-header:      100;
  --dra-z-drawer:      500;
  --dra-z-modal:       1000;
  --dra-z-fab:         900;
}