/* ===== DESIGN TOKENS ===== */
/* SPEC.md 5章のカスタムプロパティを使用する。 */
/* フォントは初回実装では外部Webフォントを読み込まず、システムフォントスタックのみを使用する（SPEC.mdより優先される個別指示）。 */

:root {
  --color-bg: #0d0d0d;
  --color-surface: #121212;
  --color-surface-deep: #0a0a0a;
  --color-text: #f2f0e9;
  --color-muted: #8b8b86;
  --color-accent: #b7ff2a;
  --color-border: rgba(242, 240, 233, 0.18);
  --color-light-bg: #f2f0e9;
  --color-dark-text: #0d0d0d;

  --font-sans:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  --font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  --page-padding: clamp(20px, 4vw, 72px);
  --section-space: clamp(120px, 16vw, 240px);
  --header-height: 96px;

  --ease-main: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 240ms;
  --duration-normal: 600ms;
  --duration-slow: 1000ms;

  /* モーションデザイン共通変数(motion instruction 4章)。
     既存の--ease-main/--duration-*は既存コンポーネントで使用中のため残し、
     新規のモーション実装はこちらを基準にする。 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-fast: 160ms;
  --motion-base: 320ms;
  --motion-slow: 720ms;
}