/*
 * SfTypography (lib/design_token/sf_typography.dart) を class 化。
 * .sf-typo-* で 9 段階のテキストスタイル。
 * .sf-text-* でテキストカラー (デザイントークンに追従)。
 */

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, 'Segoe UI', sans-serif;
}

.sf-typo-headline1 { font-size: 28px; font-weight: 700; line-height: 1.5; }
.sf-typo-headline2 { font-size: 24px; font-weight: 700; line-height: 1.5; }
.sf-typo-headline3 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.sf-typo-subtitle1 { font-size: 16px; font-weight: 700; line-height: 1.5; }
.sf-typo-subtitle2 { font-size: 14px; font-weight: 700; line-height: 1.5; }
.sf-typo-subtitle3 { font-size: 12px; font-weight: 700; line-height: 1.5; }
.sf-typo-body1     { font-size: 18px; font-weight: 400; line-height: 1.5; }
.sf-typo-body2     { font-size: 14px; font-weight: 400; line-height: 1.5; }
.sf-typo-caption1  { font-size: 12px; font-weight: 400; line-height: 1.5; }

.sf-text-primary   { color: var(--sf-text-primary); }
.sf-text-secondary { color: var(--sf-text-secondary); }
.sf-text-tertiary  { color: var(--sf-text-tertiary); }