/**
 * Design System: Typography Tokens
 *
 * Centralized CSS custom-property registry managing font scales, line heights, 
 * and responsive typography interpolation. This ensures a consistent vertical 
 * rhythm and typographic hierarchy across all viewports.
 *
 * @package Sasaeru
 */

:root {
   /* ==========================================================================
       1. FONT FAMILIES
       ========================================================================== */
   --font-primary  : 'Noto Sans JP', sans-serif;
   /* Core font for Japanese copy & UI */
   --font-secondary: 'Poppins', sans-serif;
   /* Accent font for Latin numerics & labels */

   /* ==========================================================================
       2. BASE FONT SCALE (Desktop)
       ========================================================================== */
   --fs-10: 10px;
   --fs-12: 12px;
   --fs-14: 14px;
   --fs-16: 16px;
   --fs-18: 18px;
   --fs-24: 24px;
   --fs-32: 32px;
   --fs-44: 44px;

   /* ==========================================================================
       3. LINE HEIGHTS (Vertical Rhythm)
       ========================================================================== */
   --lh-100: 100%;
   --lh-110: 110%;
   --lh-120: 120%;
   --lh-140: 140%;
   --lh-150: 150%;
   --lh-160: 160%;

   /* ==========================================================================
       4. LETTER SPACING (Tracking)
       ========================================================================== */
   --ls-01: 0.01em;
   --ls-02: 0.02em;
   --ls-05: 0.05em;
   --ls-08: 0.08em;
   --ls-10: 0.10em;

   /* ==========================================================================
       5. SEMANTIC TYPOGRAPHY TOKENS
       Component-level assignments mapping directly to the base scales.
       ========================================================================== */
   --type-h1-fs: var(--fs-44);
   --type-h1-lh: var(--lh-120);
   --type-h1-ls: var(--ls-05);

   --type-h2-fs: var(--fs-32);
   --type-h2-lh: var(--lh-140);
   --type-h2-ls: var(--ls-10);

   --type-h3-fs: var(--fs-24);
   --type-h3-lh: var(--lh-140);
   --type-h3-ls: var(--ls-05);

   --type-h4-fs: var(--fs-18);
   --type-h4-lh: var(--lh-140);
   --type-h4-ls: var(--ls-02);

   --type-body-large-fs: var(--fs-16);
   --type-body-large-lh: var(--lh-160);
   --type-body-large-ls: var(--ls-02);

   --type-body-fs: var(--fs-14);
   --type-body-lh: var(--lh-140);
   --type-body-ls: var(--ls-01);

   --type-caption-fs: var(--fs-12);
   --type-caption-lh: var(--lh-140);
   --type-caption-ls: var(--ls-01);
}

/* ==========================================================================
   6. RESPONSIVE TYPOGRAPHY OVERRIDES
   Fluid interpolation for Tablet and Mobile viewports.
   ========================================================================== */

/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
   :root {
      --type-h1-fs        : 35px;
      --type-h2-fs        : 28px;
      --type-h3-fs        : 21px;
      --type-h4-fs        : 17px;
      --type-body-large-fs: 15px;
      --type-body-fs      : 13px;

      --type-h1-lh: var(--lh-140);
   }
}

/* Mobile Breakpoint (<= 767px) */
@media (max-width: 767px) {
   :root {
      --type-h1-fs        : 26px;
      --type-h2-fs        : 24px;
      --type-h3-fs        : 18px;
      --type-h4-fs        : 16px;
      --type-body-large-fs: var(--fs-14);
      --type-body-fs      : var(--fs-12);
      --type-caption-fs   : var(--fs-12);

      /* Increased line-heights on mobile for better legibility */
      --type-h1-lh        : var(--lh-150);
      --type-h2-lh        : var(--lh-150);
      --type-h3-lh        : var(--lh-150);
      --type-h4-lh        : var(--lh-150);
      --type-body-large-lh: var(--lh-140);
   }
}