/* =========================================================
   Project : はじめのいちだま
   File    : 01-design-tokens.css
   Version : 5.3.1
   Updated : 2026-08-13

   Responsibility:
   - サイト全体で使用する設計値のみを定義
   - セクション固有のレイアウトは記述しない
========================================================= */

:root {
  /* Brand */
  --ht-color-primary: #d8494b;
  --ht-color-primary-dark: #bd393b;
  --ht-color-primary-soft: #fbefee;

  /* Neutral */
  --ht-color-bg: #f7f5f2;
  --ht-color-bg-warm: #f7f4ee;
  --ht-color-bg-soft: #faf9f6;
  --ht-color-surface: #ffffff;
  --ht-color-text: #202020;
  --ht-color-text-sub: #5f5f5f;
  --ht-color-text-muted: #777777;
  --ht-color-border: #dddddd;
  --ht-color-border-strong: #c8c8c8;

  /* Supporting */
  --ht-color-green: #8fbe72;
  --ht-color-yellow: #d9a91f;
  --ht-color-blue: #5f9fbd;
  --ht-color-purple: #8265a4;

  /* Typography */
  --ht-font-base:
    "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  /* Heading */
  --ht-font-size-section-title: clamp(2rem, 2.55vw, 2.65rem);

  /* Content hierarchy */
  --ht-font-size-lead: 1.0625rem;
  --ht-font-size-body: 1rem;
  --ht-font-size-small: 0.875rem;
  --ht-font-size-note: 0.75rem;
  --ht-font-size-micro: 0.6875rem;

  /* Compatibility aliases */
  --ht-font-size-section-lead: var(--ht-font-size-lead);
  --ht-font-size-body-sm: var(--ht-font-size-small);
  --ht-font-size-table: var(--ht-font-size-small);
  --ht-font-size-button: 1rem;
  --ht-font-size-label: 0.8125rem;

  --ht-font-weight-regular: 400;
  --ht-font-weight-bold: 700;
  --ht-font-weight-extra-bold: 900;

  --ht-line-height-lead: 1.85;
  --ht-line-height-body: 1.8;
  --ht-line-height-small: 1.7;
  --ht-line-height-note: 1.7;

  --ht-letter-spacing-heading: -0.03em;
  --ht-letter-spacing-label: 0.06em;

  /* Content widths */
  --ht-content-main: 1160px;
  --ht-content-text: 760px;
  --ht-content-faq: 880px;

  /* Layout */
  --ht-gutter: 24px;
  --ht-gutter-sp: 16px;
  --ht-section-space: clamp(72px, 6vw, 96px);
  --ht-section-space-sp: clamp(48px, 12vw, 64px);

  /* Spacing scale */
  --ht-space-1: 4px;
  --ht-space-2: 8px;
  --ht-space-12: 48px;

  /* Button */
  --ht-button-radius: 6px;
  --ht-button-height-md: 52px;
  --ht-button-height-lg: 56px;

  /* Motion */
  --ht-transition: 180ms ease;
}

@media (max-width: 767px) {
  :root {
    --ht-font-size-section-title: clamp(1.6rem, 6.2vw, 1.95rem);
    --ht-font-size-lead: 1rem;
    --ht-font-size-body: 0.9375rem;
    --ht-font-size-small: 0.8125rem;
    --ht-section-space: var(--ht-section-space-sp);
    --ht-gutter: var(--ht-gutter-sp);
  }
}

/* =========================================================
   File Information
   Updated : 2026-08-13 JST
   Status  : Latest
========================================================= */