/*
 * VocaSensei Typography Tokens
 * Bilingual 和欧混植 system: Japanese UI + English vocabulary display.
 * Follows Material Design 3 type scale.
 *
 * Fonts loaded from Google Fonts CDN.
 * For production: substitute with embedded OS fonts or licensed webfonts.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Noto+Sans:wght@300;400;500;600&family=Noto+Sans+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  /* ── Font families ── */
  /* Japanese UI text */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  /* English vocabulary headword (large display, serif) */
  --font-en-display: "Noto Serif", "Georgia", "Times New Roman", serif;
  /* English body / definitions / example sentences */
  --font-en-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* IPA phonetic notation */
  --font-ipa: "Noto Sans Mono", "Courier New", monospace;
  /* Default UI font (Japanese preferred for UI chrome) */
  --font-ui: var(--font-jp);

  /* ── M3 Type Scale ── */

  /* Display */
  --type-display-l:   57px / 64px var(--font-en-display); --type-display-l-tracking: -0.25px; --type-display-l-weight: 400;
  --type-display-m:   45px / 52px var(--font-en-display); --type-display-m-tracking: 0px;     --type-display-m-weight: 400;
  --type-display-s:   36px / 44px var(--font-en-display); --type-display-s-tracking: 0px;     --type-display-s-weight: 400;

  --type-display-l-size: 57px;   --type-display-l-lh: 64px;
  --type-display-m-size: 45px;   --type-display-m-lh: 52px;
  --type-display-s-size: 36px;   --type-display-s-lh: 44px;

  /* Headline */
  --type-headline-l-size: 32px;  --type-headline-l-lh: 40px;  --type-headline-l-tracking: 0px;   --type-headline-l-weight: 400;
  --type-headline-m-size: 28px;  --type-headline-m-lh: 36px;  --type-headline-m-tracking: 0px;   --type-headline-m-weight: 400;
  --type-headline-s-size: 24px;  --type-headline-s-lh: 32px;  --type-headline-s-tracking: 0px;   --type-headline-s-weight: 400;

  /* Title */
  --type-title-l-size: 22px;     --type-title-l-lh: 28px;     --type-title-l-tracking: 0px;      --type-title-l-weight: 400;
  --type-title-m-size: 16px;     --type-title-m-lh: 24px;     --type-title-m-tracking: 0.15px;   --type-title-m-weight: 500;
  --type-title-s-size: 14px;     --type-title-s-lh: 20px;     --type-title-s-tracking: 0.1px;    --type-title-s-weight: 500;

  /* Body */
  --type-body-l-size: 16px;      --type-body-l-lh: 24px;      --type-body-l-tracking: 0.5px;     --type-body-l-weight: 400;
  --type-body-m-size: 14px;      --type-body-m-lh: 20px;      --type-body-m-tracking: 0.25px;    --type-body-m-weight: 400;
  --type-body-s-size: 12px;      --type-body-s-lh: 16px;      --type-body-s-tracking: 0.4px;     --type-body-s-weight: 400;

  /* Label */
  --type-label-l-size: 14px;     --type-label-l-lh: 20px;     --type-label-l-tracking: 0.1px;    --type-label-l-weight: 500;
  --type-label-m-size: 12px;     --type-label-m-lh: 16px;     --type-label-m-tracking: 0.5px;    --type-label-m-weight: 500;
  --type-label-s-size: 11px;     --type-label-s-lh: 16px;     --type-label-s-tracking: 0.5px;    --type-label-s-weight: 500;

  /* ── VocaSensei Special Roles ── */

  /* Vocabulary headword — Face 1 primary display */
  --type-headword-size:    40px;
  --type-headword-lh:      48px;
  --type-headword-tracking: -0.5px;
  --type-headword-weight:  400;
  --type-headword-font:    var(--font-en-display);

  /* IPA phonetic notation — /ˈvɒkəˌseɪ/ */
  --type-ipa-size:    15px;
  --type-ipa-lh:      22px;
  --type-ipa-tracking: 0.4px;
  --type-ipa-weight:  400;
  --type-ipa-font:    var(--font-ipa);

  /* Japanese one-liner definition */
  --type-definition-jp-size:    18px;
  --type-definition-jp-lh:      28px;
  --type-definition-jp-tracking: 0.05px;
  --type-definition-jp-weight:  400;
  --type-definition-jp-font:    var(--font-jp);

  /* English dictionary definition */
  --type-definition-en-size:    14px;
  --type-definition-en-lh:      22px;
  --type-definition-en-tracking: 0.2px;
  --type-definition-en-weight:  400;
  --type-definition-en-font:    var(--font-en-body);

  /* Example sentence */
  --type-example-size:    14px;
  --type-example-lh:      22px;
  --type-example-tracking: 0.2px;
  --type-example-weight:  400;
  --type-example-style:   italic;
  --type-example-font:    var(--font-en-body);

  /* Part-of-speech label (chip) */
  --type-pos-size:    11px;
  --type-pos-lh:      16px;
  --type-pos-tracking: 0.8px;
  --type-pos-weight:  500;
  --type-pos-font:    var(--font-en-body);
}