@use 'variables' as *;

// ─── Base Typography ─────────────────────────────────────────────────────────
body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-regular;
  line-height: $line-height-base;
  color: $color-text-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// ─── Utility Classes ─────────────────────────────────────────────────────────
.text-xs     { font-size: $font-size-xs; }
.text-sm     { font-size: $font-size-sm; }
.text-base   { font-size: $font-size-base; }
.text-md     { font-size: $font-size-md; }
.text-lg     { font-size: $font-size-lg; }
.text-xl     { font-size: $font-size-xl; }

.text-muted  { color: $color-text-muted; }
.text-light  { color: $color-text-light; }
.text-dark   { color: $color-text-dark; }
.text-white  { color: $color-white; }

.font-medium { font-weight: $font-weight-medium; }
.font-bold   { font-weight: $font-weight-bold; }

.label {
  display: block;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $color-text-muted;
  margin-bottom: $space-2;
  letter-spacing: 0.01em;
}