/* =========================================================
   UTILITY CLASSES (normalized to tokens)
   ========================================================= */

.display-xxl {
  font-size: var(--fs-display-xxl, 3rem);
  line-height: var(--lh-display-xxl, 1.1);
  font-weight: var(--fw-display-xxl, 700);
}

.h-xl {
  font-size: var(--fs-h-xl, 3rem);
  line-height: var(--lh-h-xl, 1.2);
  font-weight: var(--fw-h-xl, 700);
}

.h-l {
  font-size: var(--fs-h-l, 2.25rem);
  line-height: var(--lh-h-l, 1.3);
  font-weight: var(--fw-h-l, 600);
}

.h-m {
  font-size: var(--fs-h-m, 1.75rem);
  line-height: var(--lh-h-m, 1.3);
  font-weight: var(--fw-h-m, 600);
}

.h-s {
  font-size: var(--fs-h-s, 1.5rem);
  line-height: var(--lh-h-s, 1.4);
  font-weight: var(--fw-h-s, 600);
}

.h-xs {
  font-size: var(--fs-h-xs, 1.25rem);
  line-height: var(--lh-h-xs, 1.5);
  font-weight: var(--fw-h-xs, 500);
}

.body-l {
  font-size: var(--fs-body-l, 1.125rem);
  line-height: var(--lh-body-l, 1.6);
  font-weight: var(--fw-regular, 400);
}

.body-m {
  font-size: var(--fs-body-m, 1rem);
  line-height: var(--lh-body-m, 1.6);
  font-weight: var(--fw-regular, 400);
}

.body-s {
  font-size: var(--fs-body-s, 0.875rem);
  line-height: var(--lh-body-s, 1.6);
  font-weight: var(--fw-regular, 400);
}

.label-m {
  font-size: var(--fs-label-m, 0.875rem);
  line-height: var(--lh-label-m, 1.5);
  font-weight: var(--fw-label-m, 500);
  text-transform: none;
}

.label-s {
  font-size: var(--fs-label-s, 0.8125rem);
  line-height: var(--lh-label-s, 1.5);
  font-weight: var(--fw-label-s, 500);
  text-transform: none;
}

.caption {
  font-size: var(--fs-caption, 0.8125rem);
  line-height: var(--lh-caption, 1.4);
  /* token yoksa 1.4 */
  font-weight: var(--fw-regular, 400);
  letter-spacing: var(--ls-caption, 0.04em);
  opacity: .85;
}

.surface-primary {
  --color-bg: var(--e-global-color-bg-primary);
  --color-text: var(--e-global-color-text-primary);
}

.surface-secondary {
  --color-bg: var(--e-global-color-bg-secondary);
  --color-text: var(--e-global-color-text-primary);
}

.surface-accent {
  --color-bg: var(--e-global-color-tertiary-deep);
  --color-text: var(--e-global-color-tertiary-bright);

  .theme-inverted {
    /* --color-bg: var(--e-global-color-bg-primary); */
  }
}

.surface-inverted {
  --color-bg: var(--color-text);
  --color-text: var(--color-bg);
}

.theme-primary {
  --color-bg: var(--e-global-color-primary);
  --color-text: var(--e-global-color-on-primary);
  --color-accent: var(--e-global-color-secondary-deep);
  --color-border: var(--e-global-color-secondary-deep);
  --color-highlight: var(--e-global-color-secondary-bright);
}

.theme-secondary {
  --color-bg: var(--e-global-color-secondary);
  --color-text: var(--e-global-color-on-secondary);
  --color-accent: var(--e-global-color-secondary-bright);
  --color-border: var(--e-global-color-secondary-deep);
  --color-highlight: var(--e-global-color-tertiary-deep);
}

.theme-tertiary {
  --color-bg: var(--e-global-color-tertiary);
  --color-text: var(--e-global-color-on-tertiary);
  --color-accent: var(--e-global-color-tertiary-bright);
  --color-border: var(--e-global-color-tertiary-deep);
  --color-highlight: var(--e-global-color-secondary-deep);
}

.theme-inverted {
  --color-bg: var(--color-text);
  --color-text: var(--color-bg);
}