/* ========================================
   Typography System - iOS/Android スタイル
   明確なテキスト階層とプロフェッショナルなタイポグラフィ
   ======================================== */

:root {
  /* ========== iOS/Android Type Scale ========== */

  /* Display - 大見出し（ヒーロー、ランディングページ） */
  --text-display-lg: 3.5rem;    /* 56px - Hero headings */
  --text-display: 2.75rem;      /* 44px - Large display */
  --text-display-md: 2.25rem;   /* 36px - Medium display */

  /* Headline - セクション見出し */
  --text-headline-lg: 2rem;     /* 32px - Large headlines */
  --text-headline: 1.75rem;     /* 28px - Section titles */
  --text-headline-md: 1.5rem;   /* 24px - Medium headlines */

  /* Title - カードタイトル、サブセクション */
  --text-title-lg: 1.375rem;    /* 22px - Large titles */
  --text-title: 1.25rem;        /* 20px - Card titles */
  --text-title-md: 1.125rem;    /* 18px - Medium titles */

  /* Body - 本文テキスト */
  --text-body-lg: 1.125rem;     /* 18px - Large body */
  /* --text-body: 1rem; */       /* 16px - Main text (already defined) */
  --text-body-md: 0.9375rem;    /* 15px - Medium body */
  --text-body-sm: 0.875rem;     /* 14px - Small body */

  /* Label - ラベル、キャプション */
  --text-label-lg: 0.875rem;    /* 14px - Large labels */
  --text-label: 0.8125rem;      /* 13px - Standard labels */
  --text-label-sm: 0.75rem;     /* 12px - Small labels */
  --text-label-xs: 0.6875rem;   /* 11px - Extra small */

  /* ========== Font Weights - 強化版 ========== */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ========== Line Heights - サイズ別最適化 ========== */
  --leading-display: 1.1;       /* Display用 - tight */
  --leading-headline: 1.2;      /* Headline用 */
  --leading-title: 1.25;        /* Title用 - snug */
  --leading-body: 1.5;          /* Body用 - normal */
  --leading-label: 1.4;         /* Label用 */
  --leading-relaxed: 1.625;     /* リラックス（記事など） */
  --leading-loose: 1.8;         /* Loose（マークダウンなど） */

  /* ========== Letter Spacing ========== */
  --tracking-tighter: -0.02em;  /* Display用 */
  --tracking-tight: -0.01em;    /* Headline用 */
  --tracking-normal: 0;         /* Body用 */
  --tracking-wide: 0.01em;      /* Label用 */
  --tracking-wider: 0.02em;     /* Small caps用 */
}

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

/* Display Styles */
.text-display-lg {
  font-size: var(--text-display-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
}

.text-display {
  font-size: var(--text-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
}

.text-display-md {
  font-size: var(--text-display-md);
  font-weight: var(--font-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-tight);
}

/* Headline Styles */
.text-headline-lg {
  font-size: var(--text-headline-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-tight);
}

.text-headline {
  font-size: var(--text-headline);
  font-weight: var(--font-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-tight);
}

.text-headline-md {
  font-size: var(--text-headline-md);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-normal);
}

/* Title Styles */
.text-title-lg {
  font-size: var(--text-title-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-normal);
}

.text-title {
  font-size: var(--text-title);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-normal);
}

.text-title-md {
  font-size: var(--text-title-md);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-normal);
}

/* Body Styles */
.text-body-lg {
  font-size: var(--text-body-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

.text-body-md {
  font-size: var(--text-body-md);
  font-weight: var(--font-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

.text-body-sm {
  font-size: var(--text-body-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

/* Label Styles */
.text-label-lg {
  font-size: var(--text-label-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-wide);
}

.text-label {
  font-size: var(--text-label);
  font-weight: var(--font-medium);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-wide);
}

.text-label-sm {
  font-size: var(--text-label-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-wide);
}

.text-label-xs {
  font-size: var(--text-label-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ========== Font Weight Utilities ========== */

.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black { font-weight: var(--font-black); }

/* ========== Responsive Typography ========== */

/* モバイル: フォントサイズを縮小 */
@media (max-width: 640px) {
  .text-display-lg {
    font-size: 2.25rem; /* 36px */
  }

  .text-display {
    font-size: 2rem; /* 32px */
  }

  .text-display-md {
    font-size: 1.75rem; /* 28px */
  }

  .text-headline-lg {
    font-size: 1.5rem; /* 24px */
  }

  .text-headline {
    font-size: 1.375rem; /* 22px */
  }
}

/* タブレット: 中間サイズ */
@media (min-width: 641px) and (max-width: 1023px) {
  .text-display-lg {
    font-size: 3rem; /* 48px */
  }

  .text-display {
    font-size: 2.5rem; /* 40px */
  }
}

/* ========== Semantic HTML Elements ========== */

h1 {
  font-size: var(--text-headline-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-headline);
  font-weight: var(--font-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-title-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-title);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-title-md);
  font-weight: var(--font-medium);
  line-height: var(--leading-title);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-title);
  margin-bottom: var(--space-2);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin-bottom: var(--space-4);
}

small {
  font-size: var(--text-label);
  line-height: var(--leading-label);
}

/* ========== Usage Examples ========== */
/*
  基本的な使い方:

  <h1 class="text-display-lg">メイン見出し</h1>
  <h2 class="text-headline">セクションタイトル</h2>
  <h3 class="text-title">カードタイトル</h3>
  <p class="text-body">本文テキスト</p>
  <span class="text-label">ラベル</span>

  Type Scale の選び方:
  - Display: ヒーロー、ランディングページのメイン見出し
  - Headline: ページタイトル、セクション見出し
  - Title: カードタイトル、サブセクション
  - Body: 本文、説明テキスト
  - Label: フォームラベル、キャプション、メタ情報

  iOS/Android での使用例:
  - 日記タイトル: .text-title-lg または .text-headline-md
  - カード内タイトル: .text-title
  - 本文: .text-body
  - 日付・時刻: .text-label
  - バッジ: .text-label-sm
*/