/* ==========================================================================
   メープル地所 公式サイト - Design Tokens
   ブランドコンセプト：建築士の視点 × 地域20年 × 北欧の静謐
   ========================================================================== */

:root {
  /* --- ブランドカラー（カエデの赤を主役に） ----------------------------- */
  --color-maple: #B23A2A;          /* メープル（カエデ）レッド：CTA・アクセント */
  --color-maple-deep: #8C2A1F;     /* ホバー・押下時 */
  --color-maple-soft: #E8C9C3;     /* 淡いカエデ（背景の差し色） */

  /* --- ベースカラー（紙・木・墨を意識した自然色） ---------------------- */
  --color-ink: #1F1B16;            /* 本文テキスト（純黒は使わない） */
  --color-ink-soft: #4A433C;       /* サブテキスト */
  --color-ink-muted: #8A8278;      /* キャプション・補足 */
  --color-paper: #FBF8F3;          /* ベース背景（生成り紙） */
  --color-paper-deep: #F2EDE4;     /* セクション区切り */
  --color-line: #E5DED2;           /* 罫線・ボーダー */
  --color-white: #FFFFFF;

  /* --- 北欧アクセント（旅写真と調和する寒色系の差し色） ---------------- */
  --color-nordic: #4A6670;         /* 静かなブルーグレー（北欧の空） */
  --color-nordic-soft: #C8D2D6;

  /* --- セマンティック ------------------------------------------------- */
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-sub: var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-accent: var(--color-maple);
  --color-border: var(--color-line);

  /* --- タイポグラフィ ------------------------------------------------- */
  /* 和文：Noto Serif JP（建築・誠実・上質）/ UI部分は Noto Sans JP
     欧文ディスプレイ：Cormorant Garamond（"MAPLE JISHO"のメガ装飾用） */
  --font-serif-jp: "Noto Serif JP", "Yu Mincho", "游明朝", "YuMincho", serif;
  --font-sans-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-mono-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* タイプスケール（モバイルファースト・1.250 Major Third） */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 1.75rem;    /* 28 */
  --fs-2xl: 2.25rem;   /* 36 */
  --fs-3xl: 3rem;      /* 48 */
  --fs-4xl: 4rem;      /* 64 */
  --fs-mega: clamp(3.5rem, 12vw, 9rem); /* FVのMAPLE JISHO */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.7;     /* 和文本文は広めに */
  --lh-loose: 2.0;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.35em;

  /* --- 余白（8pxベース） --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* セクション間余白（デバイス追従） */
  --section-py: clamp(64px, 10vw, 140px);
  --container-px: clamp(20px, 5vw, 48px);
  --container-max: 1200px;
  --content-max: 760px;        /* 本文（長文）の最大幅 */

  /* --- ボーダー・角丸 ------------------------------------------------ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* --- シャドウ（控えめに） ------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.04);
  --shadow-md: 0 4px 16px rgba(31, 27, 22, 0.06);
  --shadow-lg: 0 12px 40px rgba(31, 27, 22, 0.10);

  /* --- モーション ---------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;

  /* --- z-index ------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* --- ヘッダー高 ---------------------------------------------------- */
  --header-h: 72px;
  --header-h-sp: 60px;
}

/* ハイコントラスト・モーション低減対応 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}