/* 色と余白と動きの設計値をまとめる変数群 */
:root {
  --color-primary: #0A0A0A;
  --color-white: #FFFFFF;
  --color-accent: #2563EB;
  --color-accent-dark: #1D4ED8;
  --color-green: #10B981;
  --color-gray: #6B7280;
  --color-gray-light: #9CA3AF;
  --color-gray-lighter: #E5E7EB;
  --color-surface: #F9FAFB;

  --color-accent-soft: #EFF6FF;
  --color-placeholder-start: var(--color-gray-lighter);
  --color-placeholder-end: #D1D5DB;
  --color-shadow-soft: rgba(10, 10, 10, 0.08);
  --color-shadow-strong: rgba(10, 10, 10, 0.15);

  --font-family-base: "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-size-hero: clamp(2.5rem, 6vw, 5rem);
  --font-size-section: clamp(1.75rem, 4vw, 3rem);
  --font-size-subheading: clamp(1.125rem, 2vw, 1.5rem);
  --font-size-body: clamp(0.9375rem, 1.2vw, 1.125rem);
  --font-size-caption: 0.875rem;

  --container-width: 1200px;
  --content-width: 800px;
  --copy-width: 640px;
  --section-space: clamp(80px, 12vh, 160px);
  --padding-mobile: 20px;
  --header-height: 88px;

  --radius-pill: 9999px;
  --radius-card: 16px;
  --button-padding: 16px 40px;
  --card-padding: 40px 32px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.3s ease;
  --shadow-card: 0 18px 40px var(--color-shadow-soft);
  --shadow-hover: 0 4px 12px var(--color-shadow-strong);
}