/* デザイントークン: docs/design-tokens.md を正本とする */
:root {
  /* --- カラー: ブランド(固定) --- */
  --color-brand-orange: #F28627;
  --color-brand-teal: #3BA7BF;

  /* --- カラー: 中間色・ニュートラル --- */
  --color-orange-light: #FDEDE0;
  --color-orange-dark: #D9701A;
  --color-teal-light: #E8F5F8;
  --color-teal-dark: #2D8AA0;
  --color-beige: #F8F2E9;
  --color-gray-bg: #F8F8F8;
  --color-cream: #FDFAF6;
  --color-text-primary: #1E1E1E;
  --color-text-secondary: #666666;
  --color-border: #E5E5E5;
  --color-white: #FFFFFF;

  /* --- グラデーション --- */
  --gradient-compare-column: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-teal));
  --gradient-founder-bg: linear-gradient(120deg, var(--color-brand-teal) 0%, #ffffff 70%);
  --gradient-final-cta: linear-gradient(135deg, var(--color-brand-orange) 0%, var(--color-brand-teal) 100%);
  --gradient-cta-hover: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-teal));

  /* --- タイポグラフィ --- */
  --font-base: 'Noto Sans JP', sans-serif;
  --text-display: 56px;
  --text-h2: 36px;
  --text-h3: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 13px;
  --text-number-hero: 56px;

  /* --- スペーシング(8pxグリッド) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --container-max: 1200px;
  --container-pad: 24px;

  /* --- Radius --- */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-media: 16px;
  --radius-sm: 8px;

  /* --- Elevation --- */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-popular: 0 0 0 2px var(--color-brand-teal), 0 8px 24px rgba(59, 167, 191, 0.15);

  /* --- モーション --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-micro: 200ms;
  --duration-standard: 500ms;
  --duration-ambient: 16s;
  --stagger-delay: 120ms;
  --lift-hover: -4px;
  --float-distance: 12px;
}