/*
  variables.css
  デザイントークン（Figmaから取得した実値）を一元管理する。
*/

:root {
  /* ==== Color ==== */
  --color-bg: #fafaf8;            /* ページ基本背景 */
  --color-bg-alt: #f5efe6;        /* アイコン背景・淡いベージュ */
  --color-bg-muted: #ede5d7;      /* Trouble等の濃いベージュ背景 */
  --color-surface: #ffffff;
  --color-surface-alt: #f8f5f0;

  --color-accent: #4a7c59;        /* メインアクセント（深緑） */
  --color-accent-dark: #3d6a4b;   /* ボタンhover用 */
  --color-accent-light: #8fb89a;  /* 番号など */
  --color-accent-pale: #c8dcc5;   /* 大きな装飾番号 */

  --color-text: #2d2620;
  --color-text-muted: #6b5e52;
  --color-text-inverse: #ffffff;
  --color-eyebrow: #8b7355;       /* EYEBROW・小見出しの茶色 */

  --color-border: #d8cfc4;
  --color-border-soft: rgb(216 207 196 / 0.5);
  --color-footer-bg: #231e1a;

  /* ==== Typography ==== */
  --font-heading: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-accent: "Lora", "Times New Roman", serif;

  --fs-eyebrow: 0.875rem;
  --fs-small: 0.6875rem;
  --fs-body: 0.875rem;
  --fs-h3: 1.1rem;
  --fs-h2: clamp(1.9rem, 1.2rem + 1.5vw, 2.4rem);
  --fs-h1: clamp(2.1rem, 1rem + 2.6vw, 3.35rem);

  --lh-heading: 1.375;
  --lh-body: 1.9;

  /* ==== Spacing scale ==== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ==== Radius / Shadow ==== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);

  /* ==== Layout ==== */
  --container-width: 1200px;
  --container-padding: 1.25rem;
  --header-height: 68px;
  --section-padding-y: 4.5rem;

  /* ==== Motion（Hero表示・スクロール出現アニメーション用） ==== */
  --reveal-duration: 600ms;
  --reveal-distance: 16px;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-stagger: 80ms;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2.5rem;
    --section-padding-y: 8rem;
  }
}

@media (min-width: 960px) {
  :root {
    --header-height: 84px;
  }
}

/*
  ==== Breakpoint reference（@mediaではCustom Propertiesを使えないため値を直書き）====
  768px : 2カラム化・セクション余白拡大
  960px : ヘッダーをDesktop表示（ナビ展開）／固定CTAバーを非表示
*/