/* Material Design 3 Typography Scale */
/* Type Scale based on Material Design 3 guidelines */

:root {
  /* ============================================
     Display - Largest text on screen
     使用フォント: Poppins (親しみやすく、フレンドリー)
     ============================================ */
  --md-sys-typescale-display-large-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-display-large-font-size: 3.5rem;      /* 56px */
  --md-sys-typescale-display-large-line-height: 4rem;      /* 64px */
  --md-sys-typescale-display-large-font-weight: 700;
  --md-sys-typescale-display-large-letter-spacing: -0.5px;

  --md-sys-typescale-display-medium-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-display-medium-font-size: 2.8125rem;  /* 45px */
  --md-sys-typescale-display-medium-line-height: 3.25rem;  /* 52px */
  --md-sys-typescale-display-medium-font-weight: 700;
  --md-sys-typescale-display-medium-letter-spacing: -0.25px;

  --md-sys-typescale-display-small-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-display-small-font-size: 2.25rem;     /* 36px */
  --md-sys-typescale-display-small-line-height: 2.75rem;   /* 44px */
  --md-sys-typescale-display-small-font-weight: 700;
  --md-sys-typescale-display-small-letter-spacing: 0px;

  /* ============================================
     Headline - High-emphasis text
     使用フォント: Inter (クリーンでプロフェッショナル)
     ============================================ */
  --md-sys-typescale-headline-large-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-headline-large-font-size: 2rem;       /* 32px */
  --md-sys-typescale-headline-large-line-height: 2.5rem;   /* 40px */
  --md-sys-typescale-headline-large-font-weight: 700;
  --md-sys-typescale-headline-large-letter-spacing: -0.25px;

  --md-sys-typescale-headline-medium-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-headline-medium-font-size: 1.75rem;   /* 28px */
  --md-sys-typescale-headline-medium-line-height: 2.25rem; /* 36px */
  --md-sys-typescale-headline-medium-font-weight: 600;
  --md-sys-typescale-headline-medium-letter-spacing: -0.15px;

  --md-sys-typescale-headline-small-font-family: 'M PLUS 1', 'Zen Kaku Gothic New', sans-serif;
  --md-sys-typescale-headline-small-font-size: 1.5rem;     /* 24px */
  --md-sys-typescale-headline-small-line-height: 2rem;     /* 32px */
  --md-sys-typescale-headline-small-font-weight: 600;
  --md-sys-typescale-headline-small-letter-spacing: 0px;

  /* ============================================
     Title - Medium-emphasis text
     使用フォント: Inter (統一感のあるデザイン)
     ============================================ */
  --md-sys-typescale-title-large-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-title-large-font-size: 1.375rem;      /* 22px */
  --md-sys-typescale-title-large-line-height: 1.75rem;     /* 28px */
  --md-sys-typescale-title-large-font-weight: 600;
  --md-sys-typescale-title-large-letter-spacing: 0px;

  --md-sys-typescale-title-medium-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-title-medium-font-size: 1rem;         /* 16px */
  --md-sys-typescale-title-medium-line-height: 1.5rem;     /* 24px */
  --md-sys-typescale-title-medium-font-weight: 600;
  --md-sys-typescale-title-medium-letter-spacing: 0px;

  --md-sys-typescale-title-small-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-title-small-font-size: 0.875rem;      /* 14px */
  --md-sys-typescale-title-small-line-height: 1.25rem;     /* 20px */
  --md-sys-typescale-title-small-font-weight: 600;
  --md-sys-typescale-title-small-letter-spacing: 0px;

  /* ============================================
     Body - Plain text
     使用フォント: Inter (読みやすさ重視)
     ============================================ */
  --md-sys-typescale-body-large-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-body-large-font-size: 1rem;           /* 16px */
  --md-sys-typescale-body-large-line-height: 1.5rem;       /* 24px */
  --md-sys-typescale-body-large-font-weight: 400;
  --md-sys-typescale-body-large-letter-spacing: 0px;

  --md-sys-typescale-body-medium-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-body-medium-font-size: 0.875rem;      /* 14px */
  --md-sys-typescale-body-medium-line-height: 1.25rem;     /* 20px */
  --md-sys-typescale-body-medium-font-weight: 400;
  --md-sys-typescale-body-medium-letter-spacing: 0px;

  --md-sys-typescale-body-small-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-body-small-font-size: 0.75rem;        /* 12px */
  --md-sys-typescale-body-small-line-height: 1rem;         /* 16px */
  --md-sys-typescale-body-small-font-weight: 400;
  --md-sys-typescale-body-small-letter-spacing: 0px;

  /* ============================================
     Label - Text on components
     使用フォント: Inter (UI要素に最適)
     ============================================ */
  --md-sys-typescale-label-large-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-label-large-font-size: 0.875rem;      /* 14px */
  --md-sys-typescale-label-large-line-height: 1.25rem;     /* 20px */
  --md-sys-typescale-label-large-font-weight: 500;
  --md-sys-typescale-label-large-letter-spacing: 0px;

  --md-sys-typescale-label-medium-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-label-medium-font-size: 0.75rem;      /* 12px */
  --md-sys-typescale-label-medium-line-height: 1rem;       /* 16px */
  --md-sys-typescale-label-medium-font-weight: 500;
  --md-sys-typescale-label-medium-letter-spacing: 0px;

  --md-sys-typescale-label-small-font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --md-sys-typescale-label-small-font-size: 0.6875rem;     /* 11px */
  --md-sys-typescale-label-small-line-height: 1rem;        /* 16px */
  --md-sys-typescale-label-small-font-weight: 500;
  --md-sys-typescale-label-small-letter-spacing: 0px;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Display */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font-family);
  font-size: var(--md-sys-typescale-display-large-font-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
}

.display-medium {
  font-family: var(--md-sys-typescale-display-medium-font-family);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
}

.display-small {
  font-family: var(--md-sys-typescale-display-small-font-family);
  font-size: var(--md-sys-typescale-display-small-font-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
}

/* Headline */
.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font-family);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
}

.headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font-family);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
}

.headline-small {
  font-family: var(--md-sys-typescale-headline-small-font-family);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
}

/* Title */
.title-large {
  font-family: var(--md-sys-typescale-title-large-font-family);
  font-size: var(--md-sys-typescale-title-large-font-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.title-medium {
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.title-small {
  font-family: var(--md-sys-typescale-title-small-font-family);
  font-size: var(--md-sys-typescale-title-small-font-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
}

/* Body */
.body-large {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.body-medium {
  font-family: var(--md-sys-typescale-body-medium-font-family);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.body-small {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
}

/* Label */
.label-large {
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.label-medium {
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

.label-small {
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}