/**
 * デザインシステム CSS変数
 * おおたピアノ教室
 */

:root {
  /* ========== カラーパレット ========== */
  --color-base:        #FFF8F0;
  --color-base-light:  #FFFCF7;
  --color-text:        #3C3028;
  --color-text-sub:    #8B7355;
  --color-accent:      #E8B4B8;
  --color-cta:         #C97B6E;
  --color-cta-hover:   #B26A5D;
  --color-white:       #FFFFFF;
  --color-border:      #E8DFD3;
  --color-line:        #06C755;
  --color-line-hover:  #05A648;
  --color-focus:       #5A8FB5;

  /* ========== タイポグラフィ ========== */
  --font-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  --font-sans:  "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", sans-serif;
  --font-num:   "Cormorant Garamond", "Inter", serif;

  /* フォントサイズ（PC） */
  --fs-h1:      36px;
  --fs-h2:      28px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-caption: 14px;
  --fs-small:   12px;

  /* 行間 */
  --lh-tight:   1.4;
  --lh-snug:    1.5;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* ========== 余白 ========== */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-3xl:  80px;
  --section-pad: 80px;

  /* ========== レイアウト ========== */
  --container:        1080px;
  --container-narrow: 720px;
  --container-wide:   1280px;
  --gutter:           24px;

  /* ========== ボーダー・角丸 ========== */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ========== シャドウ ========== */
  --shadow-sm: 0 2px 8px rgba(60, 48, 40, 0.04);
  --shadow-md: 0 4px 16px rgba(60, 48, 40, 0.08);
  --shadow-lg: 0 8px 32px rgba(60, 48, 40, 0.12);
  --shadow-cta: 0 4px 16px rgba(201, 123, 110, 0.20);

  /* ========== トランジション ========== */
  --transition-fast: 100ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition:      200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ========== ヘッダー ========== */
  --header-h-pc: 80px;
  --header-h-sp: 64px;

  /* ========== zインデックス ========== */
  --z-header:    100;
  --z-mobile-nav: 90;
  --z-overlay:   200;
  --z-modal:     300;
}

/* タブレット以下 */
@media (max-width: 768px) {
  :root {
    --fs-h1:      28px;
    --fs-h2:      22px;
    --fs-h3:      18px;
    --fs-h4:      16px;
    --fs-body:    15px;
    --fs-caption: 13px;
    --fs-small:   11px;
    --section-pad: 48px;
    --gutter:     16px;
  }
}