/* EVOS CRM Typography System 2026
   Source of truth for interface typography tokens and semantic utilities. */

:root {
  --font-family: "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-sans: var(--font-family);
  --font-family-ui: var(--font-family);
  --font-family-display: var(--font-family);
  --font-family-data: var(--font-family);
  --font-family-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --ds-font-sans: var(--font-family);
  --ds-font-mono: var(--font-family-mono);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-display-xl: 3.5rem;
  --font-size-display-l: 3rem;
  --font-size-display-m: 2.5rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-body-lg: 1rem;
  --font-size-body-md: 0.9375rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label-lg: 0.875rem;
  --font-size-label-md: 0.8125rem;
  --font-size-label-sm: 0.75rem;
  --font-size-table-lg: 0.9375rem;
  --font-size-table-md: 0.875rem;
  --font-size-table-sm: 0.8125rem;
  --font-size-caption: 0.75rem;
  --font-size-overline: 0.6875rem;

  --line-height-display-xl: 4rem;
  --line-height-display-l: 3.5rem;
  --line-height-display-m: 3rem;
  --line-height-h1: 2.5rem;
  --line-height-h2: 2.25rem;
  --line-height-h3: 2rem;
  --line-height-h4: 1.75rem;
  --line-height-h5: 1.625rem;
  --line-height-h6: 1.5rem;
  --line-height-body-lg: 1.625rem;
  --line-height-body-md: 1.5rem;
  --line-height-body-sm: 1.25rem;
  --line-height-label-lg: 1.25rem;
  --line-height-label-md: 1.125rem;
  --line-height-label-sm: 1rem;
  --line-height-table-lg: 1.375rem;
  --line-height-table-md: 1.25rem;
  --line-height-table-sm: 1.125rem;
  --line-height-caption: 1rem;
  --line-height-overline: 0.875rem;

  --letter-spacing-display-xl: 0;
  --letter-spacing-display-l: 0;
  --letter-spacing-display-m: 0;
  --letter-spacing-h1: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-body-lg: 0;
  --letter-spacing-body-md: 0;
  --letter-spacing-body-sm: 0;
  --letter-spacing-label-lg: 0.005em;
  --letter-spacing-label-md: 0.005em;
  --letter-spacing-label-sm: 0.01em;
  --letter-spacing-table-lg: 0;
  --letter-spacing-table-md: 0;
  --letter-spacing-table-sm: 0;
  --letter-spacing-caption: 0.01em;
  --letter-spacing-overline: 0.08em;
}

html {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: var(--line-height-body-md);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-family);
}

body {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  letter-spacing: var(--letter-spacing-body-md);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-display);
  letter-spacing: 0;
}

.typo-display-xl,
.typo-display-l,
.typo-display-m,
.typo-h1,
.typo-h2,
.typo-h3 {
  font-family: var(--font-family-display);
}

.typo-display-xl {
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display-xl);
}

.typo-display-l {
  font-size: var(--font-size-display-l);
  line-height: var(--line-height-display-l);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display-l);
}

.typo-display-m {
  font-size: var(--font-size-display-m);
  line-height: var(--line-height-display-m);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-display-m);
}

.typo-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h1);
}

.typo-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
}

.typo-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h3);
}

.typo-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h4);
}

.typo-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-h5);
}

.typo-h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-h6);
}

.typo-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-body-lg);
}

.typo-body-md {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-body-md);
}

.typo-body-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-body-sm);
}

.typo-label-lg,
.typo-label-md,
.typo-label-sm {
  font-weight: var(--font-weight-medium);
}

.typo-label-lg {
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-label-lg);
  letter-spacing: var(--letter-spacing-label-lg);
}

.typo-label-md {
  font-size: var(--font-size-label-md);
  line-height: var(--line-height-label-md);
  letter-spacing: var(--letter-spacing-label-md);
}

.typo-label-sm {
  font-size: var(--font-size-label-sm);
  line-height: var(--line-height-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
}

.typo-table-lg,
.typo-table-md,
.typo-table-sm {
  font-family: var(--font-family-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.typo-table-lg {
  font-size: var(--font-size-table-lg);
  line-height: var(--line-height-table-lg);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-table-lg);
}

.typo-table-md {
  font-size: var(--font-size-table-md);
  line-height: var(--line-height-table-md);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-table-md);
}

.typo-table-sm {
  font-size: var(--font-size-table-sm);
  line-height: var(--line-height-table-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-table-sm);
}

.typo-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-caption);
}

.typo-overline {
  font-size: var(--font-size-overline);
  line-height: var(--line-height-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
}

.numeric,
.tabular-nums,
.kpi-value,
.metric-value,
.analytics-value,
.report-value,
[data-numeric],
[data-column-type="number"],
table .number,
table [data-field*="amount"],
table [data-field*="price"],
table [data-field*="total"],
table [data-field*="count"],
table [data-field*="rate"] {
  font-family: var(--font-family-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

@media (max-width: 640px) {
  :root {
    --font-size-display-xl: 2.75rem;
    --font-size-display-l: 2.375rem;
    --font-size-display-m: 2rem;
    --font-size-h1: 1.625rem;
    --font-size-h2: 1.375rem;
    --font-size-h3: 1.25rem;
    --line-height-display-xl: 3.25rem;
    --line-height-display-l: 2.875rem;
    --line-height-display-m: 2.5rem;
    --line-height-h1: 2rem;
    --line-height-h2: 1.75rem;
    --line-height-h3: 1.625rem;
  }
}