/* =========================================
   LUNA — Design Tokens
   Design System v3 (component-library準拠)

   Breakpoints (Bootstrap 5 準拠 / mobile-first):
   Default  = mobile (<576px)
   sm       = @media (min-width: 576px)
   md       = @media (min-width: 768px)  ← タブレット
   lg       = @media (min-width: 992px)  ← 小型デスクトップ
   xl       = @media (min-width: 1200px) ← デスクトップ
   xxl      = @media (min-width: 1400px)

   禁止パターン（melta UI準拠）:
   border-left カラーバー禁止（section-header-dの::beforeは許可）
   shadow-lg の多用禁止
   装飾過多禁止
   transition 300ms以上禁止
   行間が狭い日本語禁止
   純黒テキスト禁止
   色だけで情報伝達禁止
   絵文字禁止 → SVGアイコンを使う
   gradient background禁止（bodyは白）
   ========================================= */

:root {
    /* --- Colors --- */
    --gold: #c7a564;
    --gold-light: #e3cfa0;
    --gold-dark: #a68543;
    --ink: #111827;
    --text-main: #3d4b5f;
    --text-heading: #111827;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --deep: #2b3a2f;
    --deep-light: #3d5043;
    --bg: #fbf7ef;
    --bg-warm: #f5efe4;
    --card-bg: #ffffff;
    --sage: #a8b5a0;
    --sage-light: #d4dfd0;
    --sage-bg: rgba(168, 181, 160, 0.08);
    --line: rgba(17, 24, 39, 0.08);
    --line-gold: rgba(199, 165, 100, 0.15);
    --error: #c05d5d;

    /* --- Shadows --- */
    --shadow-xs: 0 1px 3px rgba(43, 58, 47, 0.03);
    --shadow-sm: 0 2px 8px -2px rgba(43, 58, 47, 0.05);
    --shadow-md: 0 4px 16px -4px rgba(43, 58, 47, 0.07);
    --shadow-lg: 0 8px 24px -6px rgba(43, 58, 47, 0.08);
    --shadow-btn: 0 4px 12px rgba(43, 58, 47, 0.15);
    --shadow-btn-hover: 0 6px 16px rgba(43, 58, 47, 0.2);

    /* --- Radius --- */
    --radius-img: 30px;
    --radius-xl: 16px;
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-pill: 99px;

    /* --- Spacing --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;

    /* --- Typography --- */
    --font-body: "IBM Plex Sans JP", "Hiragino Sans", sans-serif;
    --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --font-sub: "IBM Plex Sans JP", "Hiragino Sans", sans-serif;

    /* --- Animation --- */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Layout --- */
    --section-padding: 64px;
    --container-max: 1280px;
    --container-narrow: 800px;
    --container-wide: 1440px;
}

/* md以上でセクション余白を広げる */
@media (min-width: 768px) {
    :root {
        --section-padding: 100px;
    }
}