/**
 * type-system.css — Material Design 3 type scale, +16% on sizes and line-heights.
 * Font sizes in rem (16px base). Letter-spacing (em) and weight per M3 unchanged.
 * See: m3.material.io/styles/typography/type-scale-tokens
 * Depends on: variables.css.
 */

:root {
  /* Scale factor: +16% on Material suggested sizes for better readability */
  --type-scale: 1.16;

  /* ---- Material 3 type scale × 1.16 (size / line-height / letter-spacing / weight) ---- */
  /* Display: largest, short text */
  --md-display-large-size: 4.1325rem;   /* 57px × 1.16 */
  --md-display-large-line: 4.64rem;
  --md-display-large-tracking: -0.01562em;
  --md-display-large-weight: 400;
  --md-display-medium-size: 3.2625rem; /* 45px × 1.16 */
  --md-display-medium-line: 3.77rem;
  --md-display-medium-tracking: 0;
  --md-display-medium-weight: 400;
  --md-display-small-size: 2.61rem;    /* 36px × 1.16 */
  --md-display-small-line: 3.19rem;
  --md-display-small-tracking: 0;
  --md-display-small-weight: 400;

  /* Headline: short, important */
  --md-headline-large-size: 2.32rem;    /* 32px × 1.16 */
  --md-headline-large-line: 2.9rem;
  --md-headline-large-tracking: 0;
  --md-headline-large-weight: 400;
  --md-headline-medium-size: 2.03rem;  /* 28px × 1.16 */
  --md-headline-medium-line: 2.61rem;
  --md-headline-medium-tracking: 0;
  --md-headline-medium-weight: 400;
  --md-headline-small-size: 1.74rem;   /* 24px × 1.16 */
  --md-headline-small-line: 2.32rem;
  --md-headline-small-tracking: 0;
  --md-headline-small-weight: 400;

  /* Title: medium emphasis */
  --md-title-large-size: 1.595rem;     /* 22px × 1.16 */
  --md-title-large-line: 2.03rem;
  --md-title-large-tracking: 0;
  --md-title-large-weight: 400;
  --md-title-medium-size: 1.16rem;     /* 16px × 1.16 */
  --md-title-medium-line: 1.74rem;
  --md-title-medium-tracking: 0.00937em;
  --md-title-medium-weight: 500;
  --md-title-small-size: 1.015rem;     /* 14px × 1.16 */
  --md-title-small-line: 1.45rem;
  --md-title-small-tracking: 0.00625em;
  --md-title-small-weight: 500;

  /* Body: long-form */
  --md-body-large-size: 1.16rem;       /* 16px × 1.16 */
  --md-body-large-line: 1.74rem;
  --md-body-large-tracking: 0.03125em;
  --md-body-large-weight: 400;
  --md-body-medium-size: 1.015rem;     /* 14px × 1.16 */
  --md-body-medium-line: 1.45rem;
  --md-body-medium-tracking: 0.01786em;
  --md-body-medium-weight: 400;
  --md-body-small-size: 0.87rem;       /* 12px × 1.16 */
  --md-body-small-line: 1.16rem;
  --md-body-small-tracking: 0.03333em;
  --md-body-small-weight: 400;

  /* Label: buttons, captions */
  --md-label-large-size: 1.015rem;
  --md-label-large-line: 1.45rem;
  --md-label-large-tracking: 0.00625em;
  --md-label-large-weight: 500;
  --md-label-medium-size: 0.87rem;
  --md-label-medium-line: 1.16rem;
  --md-label-medium-tracking: 0.03125em;
  --md-label-medium-weight: 500;
  --md-label-small-size: 0.7975rem;   /* 11px × 1.16 */
  --md-label-small-line: 1.16rem;
  --md-label-small-tracking: 0.04545em;
  --md-label-small-weight: 500;

  /* ---- Mapped tokens for this project (keep same var names for compatibility) ---- */
  --text-display-size: var(--md-display-small-size);
  --text-display-line: var(--md-display-small-line);
  --text-display-tracking: var(--md-display-small-tracking);
  --text-display-weight: var(--md-display-small-weight);

  --text-headline-size: var(--md-headline-small-size);
  --text-headline-line: var(--md-headline-small-line);
  --text-headline-tracking: var(--md-headline-small-tracking);
  --text-headline-weight: var(--md-headline-small-weight);

  --text-title-size: var(--md-title-medium-size);
  --text-title-line: var(--md-title-medium-line);
  --text-title-tracking: var(--md-title-medium-tracking);
  --text-title-weight: var(--md-title-medium-weight);

  --text-body-size: var(--md-body-medium-size);
  --text-body-line: var(--md-body-medium-line);
  --text-body-tracking: var(--md-body-medium-tracking);
  --text-body-weight: var(--md-body-medium-weight);

  --text-caption-size: var(--md-label-large-size);
  --text-caption-line: var(--md-label-large-line);
  --text-caption-tracking: var(--md-label-large-tracking);
  --text-caption-weight: var(--md-label-large-weight);

  --text-small-size: var(--md-label-small-size);
  --text-small-line: var(--md-label-small-line);
  --text-small-tracking: var(--md-label-small-tracking);
  --text-small-weight: var(--md-label-small-weight);

  /* Spacing scale (Material 4dp grid: 4px = 0.25rem) */
  --space-type-tight: 0.25rem;   /* 4dp */
  --space-type-snug: 0.5rem;     /* 8dp */
  --space-type-normal: 0.75rem; /* 12dp */
  --space-type-relaxed: 1rem;   /* 16dp */
  --space-type-loose: 1.5rem;   /* 24dp */
  --space-block: 1.25rem;       /* 20dp */
  --space-block-large: 2rem;     /* 32dp */
}

/* Utility classes (widgets, content) — Vantive font families and colors, same sizes */
.w-type-display {
  font-family: var(--font-acumin-wide);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.w-type-headline {
  font-family: var(--font-acumin-wide);
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  letter-spacing: var(--text-headline-tracking);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.w-type-title {
  font-family: var(--font-acumin-wide);
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-tracking);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.w-type-body {
  font-family: var(--font-acumin);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  letter-spacing: var(--text-body-tracking);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.w-type-caption {
  font-family: var(--font-acumin);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  font-weight: var(--fw-medium);
  color: var(--color-grey);
}

.w-type-small {
  font-family: var(--font-acumin);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  letter-spacing: var(--text-small-tracking);
  font-weight: var(--fw-regular);
  color: var(--color-grey);
}

/* Spacing utilities */
.w-mt-tight { margin-top: var(--space-type-tight); }
.w-mt-snug { margin-top: var(--space-type-snug); }
.w-mt-normal { margin-top: var(--space-type-normal); }
.w-mt-relaxed { margin-top: var(--space-type-relaxed); }
.w-mt-loose { margin-top: var(--space-type-loose); }
.w-mb-tight { margin-bottom: var(--space-type-tight); }
.w-mb-snug { margin-bottom: var(--space-type-snug); }
.w-mb-normal { margin-bottom: var(--space-type-normal); }
.w-mb-relaxed { margin-bottom: var(--space-type-relaxed); }
.w-gap-normal { gap: var(--space-type-normal); }
.w-gap-relaxed { gap: var(--space-type-relaxed); }
.w-gap-loose { gap: var(--space-type-loose); }