/**
 * iCraft Design Tokens — Dark × Material
 * 墨黒（コンクリート）× 漆喰白 × ブロンズサンド
 * 全ファイルより先に読み込まれる。
 */

:root {
  /* ── Ink（墨・コンクリート）スケール ── */
  --ink-950: #0C0D0E;
  --ink-900: #121315;
  --ink-850: #17191B;
  --ink-800: #1D2023;
  --ink-700: #26292D;
  --ink-600: #33373C;

  /* ── Paper（温白＝漆喰白）テキストスケール ── */
  --paper-100: #F1EFEA;
  --paper-300: #C9C5BD;
  --paper-500: #908C83;

  /* ── ヘアライン ── */
  --line-1: rgba(241, 239, 234, 0.08);
  --line-2: rgba(241, 239, 234, 0.16);

  /* ── アクセント：ブロンズサンド ── */
  --accent: #C7A263;
  --accent-strong: #D9BC85;
  --accent-deep: #8F7340;
  --accent-ink: #121315;
  --accent-glow: rgba(199, 162, 99, 0.18);

  /* ── セマンティック ── */
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-text: var(--paper-300);
  --color-heading: var(--paper-100);
  --color-error: #E06C5A;
  --color-success: #7FAE8B;

  /* ── フォント ── */
  --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ── 流体タイプスケール（375→1280px 線形補間） ── */
  --fs-hero: clamp(2.625rem, 1.35rem + 5.4vw, 5.75rem);
  --fs-h1: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.6875rem, 1.32rem + 1.55vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-kicker: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);
  --fs-stat: clamp(3.25rem, 1.9rem + 6vw, 7rem);
  --fs-ghost: clamp(4.5rem, 2rem + 11vw, 13rem);

  /* ── スペーシング ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --section-py: clamp(5.5rem, 4rem + 7vw, 10rem);

  /* ── レイアウト ── */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-px: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;

  /* ── 形状・影 ── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 9999px;
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 8px 32px var(--accent-glow);

  /* ── モーション ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;
  --dur-4: 1.2s;

  /* ── z-index ── */
  --z-grain: 5;
  --z-header: 100;
  --z-drawer: 300;
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
  }
}