/*
|--------------------------------------------------------------------------
| Smart Laundry Design System
| Typography Tokens
| SLDS v1.0
|--------------------------------------------------------------------------
*/

:root {
  /*
    |--------------------------------------------------------------------------
    | Font Family
    |--------------------------------------------------------------------------
    */

  --sl-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
    |--------------------------------------------------------------------------
    | Font Size Scale
    |--------------------------------------------------------------------------
    */

  --sl-font-xs: 12px;

  --sl-font-sm: 14px;

  --sl-font-md: 16px;

  --sl-font-lg: 18px;

  --sl-font-xl: 20px;

  --sl-font-2xl: 24px;

  --sl-font-3xl: 30px;

  /*
    |--------------------------------------------------------------------------
    | Font Weight
    |--------------------------------------------------------------------------
    */

  --sl-font-normal: 400;

  --sl-font-medium: 500;

  --sl-font-semibold: 600;

  --sl-font-bold: 700;

  /*
    |--------------------------------------------------------------------------
    | Line Height
    |--------------------------------------------------------------------------
    */

  --sl-leading-tight: 1.25;

  --sl-leading-normal: 1.5;

  --sl-leading-relaxed: 1.75;
}

/*
|--------------------------------------------------------------------------
| Typography Classes
|--------------------------------------------------------------------------
*/

.sl-text-display {
  font-size: var(--sl-font-3xl);

  font-weight: var(--sl-font-bold);

  line-height: var(--sl-leading-tight);
}

.sl-text-heading {
  font-size: var(--sl-font-2xl);

  font-weight: var(--sl-font-semibold);

  line-height: var(--sl-leading-tight);
}

.sl-text-title {
  font-size: var(--sl-font-xl);

  font-weight: var(--sl-font-semibold);
}

.sl-text-body {
  font-size: var(--sl-font-md);

  font-weight: var(--sl-font-normal);
}

.sl-text-caption {
  font-size: var(--sl-font-sm);

  color: var(--sl-text-secondary);
}

.sl-text-helper {
  font-size: var(--sl-font-xs);

  color: var(--sl-text-muted);
}