/* =============================================================================
   variables.css — デザイントークン・CSS カスタムプロパティ
   ============================================================================= */

:root {
  /* ── カラーパレット（ライトテーマ・温かみのあるナチュラル系） ── */
  --color-accent:        hsl(14, 65%, 48%);
  --color-accent-bright: hsl(14, 70%, 55%);
  --color-accent-glow:   hsl(14, 75%, 62%);
  --color-accent-dark:   hsl(14, 60%, 38%);
  --color-accent-dim:    hsla(14, 65%, 48%, 0.1);

  --color-bg:            hsl(36, 30%, 96%);
  --color-bg-card:       hsla(36, 25%, 100%, 0.85);
  --color-bg-card-hover: hsla(36, 25%, 100%, 0.98);
  --color-surface:       hsla(36, 20%, 95%, 0.7);
  --color-border:        hsla(30, 15%, 70%, 0.35);
  --color-border-accent: hsla(14, 65%, 48%, 0.35);

  --color-text-primary:   hsl(20, 15%, 20%);
  --color-text-secondary: hsl(20, 8%, 45%);
  --color-text-muted:     hsl(20, 6%, 62%);

  /* ── フォント（統一） ── */
  --font-heading: 'Noto Sans JP', 'Segoe UI', sans-serif;
  --font-body:    'Noto Sans JP', 'Segoe UI', sans-serif;

  /* ── タイポグラフィスケール ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.8rem;
  --text-4xl:  3.8rem;

  /* ── スペーシング ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── ボーダー半径 ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── シャドウ（ライトテーマ用のソフトシャドウ） ── */
  --shadow-card:   0 4px 20px hsla(20, 10%, 40%, 0.08),
                   0 1px 4px  hsla(20, 10%, 40%, 0.06);
  --shadow-glow:   0 4px 24px hsla(14, 70%, 50%, 0.18),
                   0 0 40px hsla(14, 70%, 50%, 0.08);
  --shadow-glow-sm: 0 2px 12px hsla(14, 70%, 50%, 0.15);
  --shadow-elevated: 0 8px 32px hsla(20, 10%, 40%, 0.12),
                     0 2px 8px  hsla(20, 10%, 40%, 0.08);

  /* ── トランジション ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* ── レイアウト ── */
  --container-max: 1200px;
  --nav-height: 64px;
}