/* ==========================================================================
   Fujiwara Design 2026 – design tokens（紙×マーカー）
   ========================================================================== */
:root {
  /* 色 */
  --color-paper: #f7f6f2;
  --color-paper-deep: #efece4;
  --color-surface: #ffffff;
  --color-ink: #24303f;
  --color-ink-soft: #3d4a5c;
  --color-muted: #6b7684;
  --color-navy: #2e4664;
  --color-navy-deep: #1f3450;
  --color-navy-tint: #e9eef5;
  --color-water: #2f7fc1;
  --color-water-soft: #dff0fa;
  --color-water-deep: #1f5f94;
  --color-marker: #1f3a5f;          /* ホワイトボードの線色 */
  --color-cta: #f0a33a;
  --color-cta-deep: #d98a1c;
  --color-cta-text: #1f2a3a;
  --color-line: #dcdad2;
  --color-line-soft: #e8e6df;
  --color-success: #2e8b57;
  --color-error: #c0392b;

  /* 書体 */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif; /* 700 のみ読込。900 指定は 700 で描画される */
  --font-hand: "Yusei Magic", "Zen Kaku Gothic New", sans-serif;

  /* タイポスケール */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 2.8vw, 3.375rem);
  --fs-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-body: 1.9;
  --ls-wide: 0.06em;

  /* 余白 */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --section-sm: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  --container: 1120px;
  --container-narrow: 760px;
  --container-wide: 1320px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* 角丸・影 */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(36 48 63 / .05), 0 6px 18px rgb(36 48 63 / .06);
  --shadow-2: 0 2px 6px rgb(36 48 63 / .08), 0 16px 40px rgb(36 48 63 / .10);

  /* レイヤー */
  --z-header: 100; --z-drawer: 110; --z-sticky: 90;

  /* ヘッダー高さ */
  --header-h: 72px;

  /* 動き */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .5s;
}
@media (min-width: 900px) {
  :root { --header-h: 84px; }
}