/*
 * M3 Typography — type scale tokens (baseline + emphasized)
 * Spec: https://m3.material.io/styles/typography/type-scale-tokens
 * Nilai diverifikasi terhadap implementasi referensi Google (androidx compose material3
 * tokens/TypeScaleTokens.kt) dan tokens/_md-sys-typescale.scss (@material/web).
 * Web: 1 sp = 1/16 rem; tracking dalam px sesuai spec (dikonversi dengan calc bila perlu).
 */
@layer tokens, base, components, utilities;
@layer tokens {
  :root {
    --md-ref-typeface-brand: var(--md-ref-typeface-plain);
    --md-ref-typeface-weight-regular: 400;
    --md-ref-typeface-weight-medium: 500;
    --md-ref-typeface-weight-bold: 700;

    /* Display */
    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-display-large-size: 3.5625rem;
    --md-sys-typescale-display-large-line-height: 4rem;
    --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-display-large-tracking: -0.015625rem;
    --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-display-medium-size: 2.8125rem;
    --md-sys-typescale-display-medium-line-height: 3.25rem;
    --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-display-medium-tracking: 0;
    --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-display-small-size: 2.25rem;
    --md-sys-typescale-display-small-line-height: 2.75rem;
    --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-display-small-tracking: 0;

    /* Headline */
    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large-size: 2rem;
    --md-sys-typescale-headline-large-line-height: 2.5rem;
    --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-headline-large-tracking: 0;
    --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-medium-size: 1.75rem;
    --md-sys-typescale-headline-medium-line-height: 2.25rem;
    --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-headline-medium-tracking: 0;
    --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-small-size: 1.5rem;
    --md-sys-typescale-headline-small-line-height: 2rem;
    --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-headline-small-tracking: 0;

    /* Title */
    --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-title-large-size: 1.375rem;
    --md-sys-typescale-title-large-line-height: 1.75rem;
    --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-title-large-tracking: 0;
    --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-title-medium-size: 1rem;
    --md-sys-typescale-title-medium-line-height: 1.5rem;
    --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-title-medium-tracking: 0.009375rem;
    --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-title-small-size: 0.875rem;
    --md-sys-typescale-title-small-line-height: 1.25rem;
    --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-title-small-tracking: 0.00625rem;

    /* Body */
    --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-body-large-size: 1rem;
    --md-sys-typescale-body-large-line-height: 1.5rem;
    --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-body-large-tracking: 0.03125rem;
    --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-body-medium-size: 0.875rem;
    --md-sys-typescale-body-medium-line-height: 1.25rem;
    --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-body-medium-tracking: 0.015625rem;
    --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-body-small-size: 0.75rem;
    --md-sys-typescale-body-small-line-height: 1rem;
    --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
    --md-sys-typescale-body-small-tracking: 0.025rem;

    /* Label */
    --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-label-large-size: 0.875rem;
    --md-sys-typescale-label-large-line-height: 1.25rem;
    --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-label-large-weight-prominent: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-label-large-tracking: 0.00625rem;
    --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-label-medium-size: 0.75rem;
    --md-sys-typescale-label-medium-line-height: 1rem;
    --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-label-medium-weight-prominent: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-label-medium-tracking: 0.03125rem;
    --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-label-small-size: 0.6875rem;
    --md-sys-typescale-label-small-line-height: 1rem;
    --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-label-small-tracking: 0.03125rem;

    /* Emphasized set (M3 Expressive): ukuran & line-height sama, bobot lebih tinggi. */
    --md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);
    --md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);
    --md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);
  }
}

/* Kelas utilitas type scale — satu-satunya cara menetapkan ukuran teks di situs ini. */
@layer utilities {
  .md-typescale-display-large,
  .md-typescale-display-medium,
  .md-typescale-display-small,
  .md-typescale-headline-large,
  .md-typescale-headline-medium,
  .md-typescale-headline-small,
  .md-typescale-title-large,
  .md-typescale-title-medium,
  .md-typescale-title-small,
  .md-typescale-body-large,
  .md-typescale-body-medium,
  .md-typescale-body-small,
  .md-typescale-label-large,
  .md-typescale-label-medium,
  .md-typescale-label-small {
    font-family: var(--_font);
    font-size: var(--_size);
    line-height: var(--_line-height);
    font-weight: var(--_weight);
    letter-spacing: var(--_tracking);
  }
  .md-typescale-display-large {
    --_font: var(--md-sys-typescale-display-large-font);
    --_size: var(--md-sys-typescale-display-large-size);
    --_line-height: var(--md-sys-typescale-display-large-line-height);
    --_weight: var(--md-sys-typescale-display-large-weight);
    --_tracking: var(--md-sys-typescale-display-large-tracking);
  }
  .md-typescale-display-medium {
    --_font: var(--md-sys-typescale-display-medium-font);
    --_size: var(--md-sys-typescale-display-medium-size);
    --_line-height: var(--md-sys-typescale-display-medium-line-height);
    --_weight: var(--md-sys-typescale-display-medium-weight);
    --_tracking: var(--md-sys-typescale-display-medium-tracking);
  }
  .md-typescale-display-small {
    --_font: var(--md-sys-typescale-display-small-font);
    --_size: var(--md-sys-typescale-display-small-size);
    --_line-height: var(--md-sys-typescale-display-small-line-height);
    --_weight: var(--md-sys-typescale-display-small-weight);
    --_tracking: var(--md-sys-typescale-display-small-tracking);
  }
  .md-typescale-headline-large {
    --_font: var(--md-sys-typescale-headline-large-font);
    --_size: var(--md-sys-typescale-headline-large-size);
    --_line-height: var(--md-sys-typescale-headline-large-line-height);
    --_weight: var(--md-sys-typescale-headline-large-weight);
    --_tracking: var(--md-sys-typescale-headline-large-tracking);
  }
  .md-typescale-headline-medium {
    --_font: var(--md-sys-typescale-headline-medium-font);
    --_size: var(--md-sys-typescale-headline-medium-size);
    --_line-height: var(--md-sys-typescale-headline-medium-line-height);
    --_weight: var(--md-sys-typescale-headline-medium-weight);
    --_tracking: var(--md-sys-typescale-headline-medium-tracking);
  }
  .md-typescale-headline-small {
    --_font: var(--md-sys-typescale-headline-small-font);
    --_size: var(--md-sys-typescale-headline-small-size);
    --_line-height: var(--md-sys-typescale-headline-small-line-height);
    --_weight: var(--md-sys-typescale-headline-small-weight);
    --_tracking: var(--md-sys-typescale-headline-small-tracking);
  }
  .md-typescale-title-large {
    --_font: var(--md-sys-typescale-title-large-font);
    --_size: var(--md-sys-typescale-title-large-size);
    --_line-height: var(--md-sys-typescale-title-large-line-height);
    --_weight: var(--md-sys-typescale-title-large-weight);
    --_tracking: var(--md-sys-typescale-title-large-tracking);
  }
  .md-typescale-title-medium {
    --_font: var(--md-sys-typescale-title-medium-font);
    --_size: var(--md-sys-typescale-title-medium-size);
    --_line-height: var(--md-sys-typescale-title-medium-line-height);
    --_weight: var(--md-sys-typescale-title-medium-weight);
    --_tracking: var(--md-sys-typescale-title-medium-tracking);
  }
  .md-typescale-title-small {
    --_font: var(--md-sys-typescale-title-small-font);
    --_size: var(--md-sys-typescale-title-small-size);
    --_line-height: var(--md-sys-typescale-title-small-line-height);
    --_weight: var(--md-sys-typescale-title-small-weight);
    --_tracking: var(--md-sys-typescale-title-small-tracking);
  }
  .md-typescale-body-large {
    --_font: var(--md-sys-typescale-body-large-font);
    --_size: var(--md-sys-typescale-body-large-size);
    --_line-height: var(--md-sys-typescale-body-large-line-height);
    --_weight: var(--md-sys-typescale-body-large-weight);
    --_tracking: var(--md-sys-typescale-body-large-tracking);
  }
  .md-typescale-body-medium {
    --_font: var(--md-sys-typescale-body-medium-font);
    --_size: var(--md-sys-typescale-body-medium-size);
    --_line-height: var(--md-sys-typescale-body-medium-line-height);
    --_weight: var(--md-sys-typescale-body-medium-weight);
    --_tracking: var(--md-sys-typescale-body-medium-tracking);
  }
  .md-typescale-body-small {
    --_font: var(--md-sys-typescale-body-small-font);
    --_size: var(--md-sys-typescale-body-small-size);
    --_line-height: var(--md-sys-typescale-body-small-line-height);
    --_weight: var(--md-sys-typescale-body-small-weight);
    --_tracking: var(--md-sys-typescale-body-small-tracking);
  }
  .md-typescale-label-large {
    --_font: var(--md-sys-typescale-label-large-font);
    --_size: var(--md-sys-typescale-label-large-size);
    --_line-height: var(--md-sys-typescale-label-large-line-height);
    --_weight: var(--md-sys-typescale-label-large-weight);
    --_tracking: var(--md-sys-typescale-label-large-tracking);
  }
  .md-typescale-label-medium {
    --_font: var(--md-sys-typescale-label-medium-font);
    --_size: var(--md-sys-typescale-label-medium-size);
    --_line-height: var(--md-sys-typescale-label-medium-line-height);
    --_weight: var(--md-sys-typescale-label-medium-weight);
    --_tracking: var(--md-sys-typescale-label-medium-tracking);
  }
  .md-typescale-label-small {
    --_font: var(--md-sys-typescale-label-small-font);
    --_size: var(--md-sys-typescale-label-small-size);
    --_line-height: var(--md-sys-typescale-label-small-line-height);
    --_weight: var(--md-sys-typescale-label-small-weight);
    --_tracking: var(--md-sys-typescale-label-small-tracking);
  }

  /* Varian emphasized: tambahkan bersama kelas skala di atas. */
  .md-typescale-display-large.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-display-large-weight);
  }
  .md-typescale-display-medium.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-display-medium-weight);
  }
  .md-typescale-display-small.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-display-small-weight);
  }
  .md-typescale-headline-large.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-headline-large-weight);
  }
  .md-typescale-headline-medium.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-headline-medium-weight);
  }
  .md-typescale-headline-small.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-headline-small-weight);
  }
  .md-typescale-title-large.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-title-large-weight);
  }
  .md-typescale-title-medium.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-title-medium-weight);
  }
  .md-typescale-title-small.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-title-small-weight);
  }
  .md-typescale-body-large.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-body-large-weight);
  }
  .md-typescale-body-medium.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-body-medium-weight);
  }
  .md-typescale-body-small.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-body-small-weight);
  }
  .md-typescale-label-large.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-label-large-weight);
  }
  .md-typescale-label-medium.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  }
  .md-typescale-label-small.md-emphasized {
    --_weight: var(--md-sys-typescale-emphasized-label-small-weight);
  }
}