/* ==========================================================================
   Design tokens — Leap Ahead
   色・文字・余白などの基本値。全サイト共通。仕様は docs/design-system.md
   ========================================================================== */
:root {
  color-scheme: light;

  /* Base */
  --c-paper: #f5f2eb;
  --c-paper-2: #ebe6da;
  --c-surface: #ffffff;
  --c-ink: #16150f;
  --c-ink-2: #45423a;
  --c-ink-3: #66625a;
  --c-line: #d6cfc0;
  --c-leap: #ff4d1c;          /* ブランドアクセント。文字色には使わず、塗り・線に使う */
  --c-leap-ink: #b52e08;      /* 背景上の文字に使う場合（AA 対応） */

  /* Business accent（いずれも白文字・Paper 背景で AA 以上） */
  --c-real-estate: #1e6b57;
  --c-akiya: #9a4a1e;
  --c-web: #2747e8;
  --c-platform: #6b47d6;
  --c-me: #7d5f00;

  /* Status */
  --c-success: #1e7a3c;
  --c-error: #c42b1c;
  --c-warning: #8a5a00;
  --c-info: #2747e8;

  /* Typography */
  --f-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --f-display: "Space Grotesk", var(--f-sans);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.125rem, 1.4rem + 3.4vw, 4rem);
  --fs-display: clamp(4rem, 1rem + 13vw, 12rem);

  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-body: 1.9;

  /* Spacing（4px 基準） */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Layout */
  --container: 1200px;
  --narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;

  /* Shape */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --border: 1.5px solid var(--c-ink);
  --shadow-hard: 5px 5px 0 var(--c-ink);
  --shadow-hard-sm: 3px 3px 0 var(--c-ink);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.2s;

  /* ページ単位のアクセント（data-section で切り替え） */
  --accent: var(--c-leap);
  --accent-text: var(--c-leap-ink);
  --on-accent: var(--c-ink);
}

/* 事業ごとのアクセント。ページ全体（body）と個別の要素（.accent-*）の両方に使う */
[data-section="real-estate"], .accent-real-estate { --accent: var(--c-real-estate); --accent-text: var(--c-real-estate); --on-accent: #fff; }
[data-section="akiya"], .accent-akiya { --accent: var(--c-akiya); --accent-text: var(--c-akiya); --on-accent: #fff; }
[data-section="web"], .accent-web { --accent: var(--c-web); --accent-text: var(--c-web); --on-accent: #fff; }
[data-section="platform"], .accent-platform { --accent: var(--c-platform); --accent-text: var(--c-platform); --on-accent: #fff; }
[data-section="me"], .accent-me { --accent: var(--c-me); --accent-text: var(--c-me); --on-accent: #fff; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}