/* design-tokens.css — まなぶキッズ トップページ カラー・余白・タイポトークン */

:root {
  /* Colors — navy / blue system (実測値ベース) */
  --color-navy-900: #0b2a54; /* footer bg */
  --color-navy-800: #0e3e78; /* final CTA band bg */
  --color-navy-700: #1b3a6b; /* headings, hero h1 */
  --color-navy-600: #2c4a7c; /* secondary heading text */

  --color-blue-600: #0b57d0; /* primary button / link */
  --color-blue-500: #2f6fe0; /* hover */
  --color-blue-100: #eaf2fe; /* hero bg tint, badge bg */
  --color-blue-050: #f4f8fc; /* section bg tint */

  --color-sky-200: #cfeaf1; /* trust strip icon accent */

  --color-green-700: #1c7a45; /* subsidy heading text */
  --color-green-600: #219653; /* subsidy amount accent */
  --color-green-500: #2fa85d; /* green cta / 0円 box */
  --color-green-100: #e3f4ea; /* subsidy panel bg */

  --color-line-green: #06c755; /* LINE brand button */
  --color-line-green-dark: #05a648;

  --color-gray-900: #22304a; /* body text */
  --color-gray-700: #4a5670; /* secondary text */
  --color-gray-500: #7c869c; /* muted text */
  --color-gray-100: #f2f3f5; /* card bg */
  --color-gray-050: #f8f9fb; /* alt section bg */

  --color-white: #ffffff;
  --color-border: #e2e6ee;

  /* Typography */
  --font-base:
    "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "Meiryo", sans-serif;

  --fs-h1: clamp(1.9rem, 3.4vw + 1rem, 2.75rem);
  --fs-h2: clamp(1.4rem, 1.6vw + 1rem, 1.9rem);
  --fs-h3: clamp(1.05rem, 0.6vw + 0.9rem, 1.2rem);
  --fs-lead: clamp(0.95rem, 0.4vw + 0.85rem, 1.05rem);
  --fs-body: clamp(0.9rem, 0.2vw + 0.85rem, 0.98rem);
  --fs-small: clamp(0.78rem, 0.15vw + 0.74rem, 0.85rem);

  /* Spacing */
  --section-pad-y: clamp(48px, 6vw, 88px);
  --container-pad-x: clamp(20px, 4vw, 40px);
  --container-max: 1180px;

  /* Radius / Shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 6px 24px rgba(27, 58, 107, 0.08);
  --shadow-card-hover: 0 10px 32px rgba(27, 58, 107, 0.14);

  /* Layout */
  --header-height: 72px;
}