/* アイのあるミライ 公式サイト — デザイントークン */

:root {
  /* ブランド（ロゴから抽出） */
  --brand-pink: #ff66c4;
  --brand-cyan: #38b6ff;
  --brand-indigo: #2a2f6b;

  /* ライトテーマ（既定） */
  --bg: #fbf6ef;
  --bg-alt: #f3ece2;
  --surface: #ffffff;
  --surface-soft: #fffdfa;
  --ink: #14182a;
  --ink-soft: #4d5468;
  --ink-faint: #8b90a2;
  --line: rgba(20, 24, 42, 0.12);
  --line-strong: rgba(20, 24, 42, 0.24);
  --shadow-sm: 0 2px 10px rgba(20, 24, 42, 0.06);
  --shadow-md: 0 18px 40px -18px rgba(20, 24, 42, 0.28);
  --shadow-lg: 0 40px 90px -40px rgba(20, 24, 42, 0.45);
  --glow-pink: rgba(255, 102, 196, 0.32);
  --glow-cyan: rgba(56, 182, 255, 0.3);
  --marker: rgba(255, 102, 196, 0.38);
  --grid-line: rgba(20, 24, 42, 0.05);
  --header-bg: rgba(251, 246, 239, 0.72);
  --plate: #ffffff;

  /* タイポグラフィ */
  --font-ja: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-en: "Space Grotesk", var(--font-ja);
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.22vw, 1.02rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.5rem + 5vw, 6.2rem);

  /* レイアウト */
  --page: 1240px;
  --gutter: clamp(18px, 5vw, 56px);
  --block: clamp(72px, 10vw, 150px);
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --bg: #0a0c16;
  --bg-alt: #10131f;
  --surface: #161a29;
  --surface-soft: #1c2133;
  --ink: #f2f1ef;
  --ink-soft: #b4bacd;
  --ink-faint: #767d94;
  --line: rgba(242, 241, 239, 0.14);
  --line-strong: rgba(242, 241, 239, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --glow-pink: rgba(255, 102, 196, 0.42);
  --glow-cyan: rgba(56, 182, 255, 0.38);
  --marker: rgba(255, 102, 196, 0.42);
  --grid-line: rgba(242, 241, 239, 0.05);
  --header-bg: rgba(10, 12, 22, 0.72);
  --plate: #f7f5f2;
}