/**
 * tokens.css — Pattern B: peaceput インスパイア 青軸パレット
 *
 * peaceput の暖色世界観（アイボリー＋赤）を青軸で「再演奏」。
 * 役割対応：
 *   peaceput #D1211D → cross #1D4ED8（メインアクセント）
 *   peaceput #FAF0E8 → cross #F2F4F8（背景ベース）
 *   peaceput #F4ECE5 → cross #E8EDF5（サブ背景）
 *   peaceput #50403C → cross #0F1F3A（暗背景）
 *   peaceput #4E463F → cross #1F2937（文字色）
 *   peaceput #D8C0B0 → cross #BFDBFE（補助線）
 */

:root {
  /* ---- Core Palette ---- */
  --color-accent:       #1D4ED8;   /* メインアクセント（peaceput 赤の青版） */
  --color-accent-light: #3B82F6;   /* 明るいアクセント */
  --color-accent-pale:  #EFF6FF;   /* 極淡アクセント */

  --color-bg:           #F2F4F8;   /* 背景ベース（peaceput アイボリーの青版） */
  --color-bg-soft:      #E8EDF5;   /* サブ背景 */
  --color-bg-white:     #FFFFFF;   /* 純白 */
  --color-bg-deep:      #0F1F3A;   /* 暗背景（peaceput トープの青版） */
  --color-bg-deep-alt:  #162744;   /* 暗背景バリエーション */

  --color-text:         #1F2937;   /* 本文（peaceput #4E463F の青版） */
  --color-text-secondary: #4B5563; /* 副テキスト */
  --color-text-muted:   #6B7280;   /* 補助テキスト */
  --color-text-inverse: #FFFFFF;   /* 暗背景上のテキスト */

  --color-line:         #BFDBFE;   /* 補助線（peaceput #D8C0B0 の青版） */
  --color-border:       #D1D5DB;   /* 通常ボーダー */
  --color-border-light: #E5E7EB;   /* 淡いボーダー */

  /* ---- Hero Gradient Colors ---- */
  --hero-grad-a: #0F1F3A;
  --hero-grad-b: #1E3A5F;
  --hero-grad-c: #162744;
  --hero-grad-d: #0C1930;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Bodoni Moda', 'Didot', 'Georgia', serif;
  --font-sans:    'IBM Plex Sans JP', 'Noto Sans JP', sans-serif;

  --font-size-xs:   0.6875rem;  /* 11px */
  --font-size-sm:   0.8125rem;  /* 13px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md:   1.0625rem;  /* 17px */
  --font-size-lg:   1.25rem;    /* 20px */
  --font-size-xl:   1.5rem;     /* 24px */
  --font-size-2xl:  2rem;       /* 32px */
  --font-size-3xl:  2.5rem;     /* 40px */
  --font-size-4xl:  3.25rem;    /* 52px */
  --font-size-display: clamp(4.5rem, 14vw, 13rem); /* 巨大年号・章番号 */

  /* ---- Layout ---- */
  --container:          67.5rem;  /* 1080px */
  --container-mid:      54.5rem;  /* 872px */
  --container-narrow:   45rem;    /* 720px */
  --bp-sp:              820.98px;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  5rem;
  --space-10: 7rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  /* ---- Shadow ---- */
  /* peaceput 解析: 極薄影。奥行きは重なり順・背景色差で作る */
  --shadow-xs:   0 2px 8px  rgba(15, 31, 58, 0.04);
  --shadow-sm:   0 4px 16px rgba(15, 31, 58, 0.05);
  --shadow-md:   0 8px 24px rgba(15, 31, 58, 0.06);
  --shadow-card: 0 8px 24px rgba(15, 31, 58, 0.06); /* peaceput 最大値 */

  /* ---- Border Radius ---- */
  /* peaceput: ハードエッジ基調・角丸最小限 */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---- Transition ---- */
  --transition-fast:   0.18s ease;
  --transition-base:   0.28s ease;
  --transition-slow:   0.5s  ease;

  /* ---- Z-index ---- */
  /* peaceput 構造: video 0 / overlay 1 / hero content 2 / header 3 */
  --z-video:   0;
  --z-overlay: 1;
  --z-hero:    2;
  --z-header:  3;
  --z-drawer:  20;
  --z-demo:    100;
}