/* font faces: AUTOMATIC */
@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
  font-weight: 400;
}

/* font faces: DASHBOARD */
@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* to remove */
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-4xl: 44px;

  /* Font Families */
  --font-family: 'Manrope';
  --font-family-geist-mono: 'Geist Mono';

  /* Font Sizes */
  --font-size-xxxs: 10px;
  --font-size-xxs: 12px;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-xxs: 18px;
  --line-height-xs: 20px;
  --line-height-sm: 24px;
  --line-height-md: 28px;
  --line-height-lg: 30px;
  --line-height-xl: 32px;

  /* Dense xs body copy — same metrics as .txt-datagrid-cell-body; used by modal description vars */
  --typography-dense-xs-font-size: var(--font-size-xs);

  /* Letter Spacing */
  --letter-spacing-neg-1: -0.01em; /* -1% */
  --letter-spacing-8: 0.08em; /* 8% */
  --letter-spacing-neg-024px: -0.24px;

  /* Input Styles */
  --button-font-weight: 600;
  --button-font-size: var(--font-size-xs);
  --button-text-color: var(--color-gray-0);
  --input-label-msg-text-size: var(--font-size-xs);
  --input-text-color: var(--color-gray-1500);
  --input-label-msg-text-color: var(--color-gray-1500);
  --left-button-text-color: var(--text-color-tertiary);
  --toast-subtext-font-size: var(--font-size-xxs);
  --toast-font-weight: var(--font-weight-regular);
  --toggle-text-color: var(--text-color-secondary);

  .heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 5px;
  }

  .small-text {
    font-size: var(--font-size-sm);
    color: var(--text-color-primary);
    margin: 0;
    padding: 0;
  }

  .small-text-secondary {
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary);
    margin: 0;
    padding: 0;
  }

  /* AI Component Typography */
  .ai-metric-value {
    color: var(--ai-text-primary);
    margin: 0;
    padding: 0;
  }

  .ai-title {
    color: var(--ai-text-primary);
    margin: 0;
    padding: 0;
  }

  .ai-section-heading {
    font-size: var(--font-size-sm);
    color: var(--ai-text-primary);
    letter-spacing: 0.5px;
  }

  .ai-summary-text {
    font-size: var(--font-size-sm);
    color: var(--ai-text-primary);
    line-height: 1.6;
  }

  .ai-header {
    font-size: var(--font-size-lg);
  }

  .mandate-text-secondary {
    color: var(--text-color-secondary);
  }
}

:root[automatic='false'] {
  --font-family: 'Inter';
}

:root[automatic='true'] {
  --font-family: 'Manrope';
}

body {
  font-family: var(--font-family, sans-serif);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

h1 {
  color: var(--text-color-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xl);
  margin-top: 0;
  margin-block: 0;
}

h2 {
  color: var(--text-color-secondary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-top: 0;
  line-height: 30px;
  margin-block: 0;
}

h3 {
  color: var(--text-color-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-top: 0;
  margin-block: 0;
  line-height: 20px;
}

h4 {
  color: var(--text-color-primary-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-top: 0;
  margin-block: 0;
}

h5 {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 8px;
}

h6 {
  font-size: var(--font-size-xxs);
  color: var(--text-color-secondary);
  font-weight: var(--font-weight-medium);
  margin-top: 0;
}

p {
  color: var(--text-color-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  margin-top: 0;
}

span {
  color: var(--text-color-tertiary);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
}

a {
  color: var(--color-blue-600);
  text-decoration: none;
}

a:hover {
  color: var(--text-color-secondary);
}

th {
  background-color: var(--table-header-border-bgcolor, var(--color-gray-100));
  font-size: var(--font-size-xs);
  color: var(--text-color-primary-light);
  font-weight: var(--font-weight-medium);
}

td {
  font-size: var(--font-size-xs);
}

li {
  margin: 0 0 10px;
}

/* ============================================
   GLOBAL TYPOGRAPHY UTILITY CLASSES (txt-*)
   Use these prefixed classes for consistent typography across the app
   ============================================ */

/* Headings - Medium weight heading variations */
.txt-heading-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xl);
  color: var(--text-color-primary);
}

.txt-heading-xl-semibold {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-neg-1);
  color: var(--text-color-primary);
}

.txt-heading-2xl {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  color: var(--text-color-focus);
}

.txt-heading-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--text-color-primary);
}

.txt-statistics-heading-lg {
  margin: 0;
  color: var(--statistics-value-color);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.2px;
}

.txt-heading-lg-bold {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 28px;
  color: var(--text-color-primary);
}

.txt-heading-md {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  color: var(--text-color-primary);
}

.txt-heading-md-semibold {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  color: var(--text-color-primary);
}

.txt-heading-md-bold {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 24px;
  color: var(--text-color-primary);
}

.txt-heading-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  color: var(--text-color-secondary);
}

.txt-heading-sm-semibold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
  color: var(--text-color-primary);
}

.txt-heading-sm-bold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 22px;
  color: var(--text-color-primary);
}

.txt-heading-xs {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-color-secondary);
}

.txt-heading-xs-semibold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  color: var(--text-color-primary);
}

.txt-heading-xs-bold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 20px;
  color: var(--text-color-primary);
}

/* Labels - Small text for UI labels */
.txt-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--text-color-primary);
}

.txt-label-secondary {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--text-color-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.txt-label-sm {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  color: var(--text-color-secondary);
}

.txt-label-xs {
  font-size: var(--font-size-xs);
  line-height: 20px;
  color: var(--text-color-secondary);
}

.txt-label-statistics-accent {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--statistics-value-color);
}

.txt-label-xxs {
  font-size: var(--font-size-xxs);
  line-height: 20px;
  color: var(--text-color-primary);
}

/* Body text - Regular weight body copy */
.txt-body {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--text-color-tertiary);
}

.txt-body-medium {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--text-color-secondary);
}

/* Secondary body — muted descriptive text under section headings.
   Matches Breeze Dashboard Design System "section description" 400 14px/20px. */
.txt-body-secondary {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--text-color-tertiary);
}

.txt-body-muted {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: var(--text-color-muted);
}

.txt-body-accent-blue {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: var(--text-color-accent-blue);
}

.upper-txt {
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.txt-body-sm {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--text-color-tertiary);
}

.txt-body-md {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color: var(--text-color-tertiary);
}

.txt-body-light {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-light);
  line-height: 16px;
}

/* Emphasis - Bold body text for key information */
.txt-body-emphasis {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.txt-body-emphasis-bold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.txt-body-emphasis-sm {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.txt-body-emphasis-xs {
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* Checkout detail page — metric tile value XL (24px/600/gray-1600) — Heading-03/Semibold */
.txt-metric-value-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-neg-024px);
  color: var(--statistics-value-color);
}

/* Badge - Bold text for badges and tags */
.txt-badge {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
}

.txt-display-rl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-neg-024px);
}

.txt-display-disabled {
  color: var(--text-color-placeholder);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  margin-top: 0;
  margin-block: 0;
}

.txt-display-subheading {
  color: var(--text-color-primary-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  margin-top: 0;
  margin-block: 0;
}

/* Body-02/Semibold — metric tile / card heading (14px, 600, gray-1800) */
.txt-body-semibold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  color: var(--text-color-primary);
}

.txt-display-numbers {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  margin-top: 0;
  margin-block: 0;
}

.txt-badge-sm {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

/* Display - Large display text for metrics/hero values */
.txt-display-xl {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-light);
  line-height: 150%;
}

/* Hero balance / KPI number — bold display number for a single card hero.
   Sized to feel prominent without overpowering the card; the design spec's
   96px proved too dominant inside our card width, so we use 48px which still
   reads as a hero next to descriptive labels. */
.txt-display-hero {
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-color-primary);
}

.txt-display-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: 1.2;
}

.txt-display-md {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  line-height: 100%;
}

.txt-grid-primary {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  color: var(--color-text);
}

.txt-grid-secondary {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: var(--text-color-primary-light, var(--text-color-primary-light));
}

.txt-grid-regular {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  color: var(--color-gray-1800, var(--text-color-primary));
}

.txt-grid-header {
  font-size: var(--datagrid-header-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xxs);
}

/* ============================================
   LEGACY ALIASES (DEPRECATED - Use txt-* classes)
   These are kept for backward compatibility
   TODO: Remove after migration is complete
   ============================================ */

/* @deprecated Use .txt-heading-lg instead */
.subtitle-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--text-color-primary);
}

/* @deprecated Use .txt-heading-md instead */
.subtitle-md {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  color: var(--text-color-primary);
}

/* @deprecated Use .txt-heading-sm instead */
.subtitle-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  color: var(--text-color-secondary);
}

/* @deprecated Use .txt-label instead */
.label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--text-color-primary);
}

/* @deprecated Use .txt-label-sm instead */
.label-sm {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  color: var(--text-color-secondary);
}

/* @deprecated Use .txt-body instead */
.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--text-color-tertiary);
}

/* @deprecated Use .txt-body-sm instead */
.caption-sm {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--text-color-tertiary);
}

/* @deprecated Use .txt-body-light instead */
.caption-light {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-light);
  line-height: 16px;
}

/* @deprecated Use .txt-badge instead */
.badge {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
}

/* @deprecated Use .txt-badge-sm instead */
.badge-sm {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  color: var(--color-gray-900);
}

/* @deprecated Use .txt-display-xl instead */
.display-xl {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-light);
  line-height: 150%;
}

/* @deprecated Use .txt-display-lg instead */
.display-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: 1.2;
}

/* @deprecated Use .txt-display-md instead */
.display-md {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  line-height: 100%;
}

/* @deprecated Use .txt-body-emphasis instead */
.text-error {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

/* @deprecated Use .txt-body-emphasis-sm instead */
.text-error-detail {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* @deprecated Use .txt-body-emphasis-xs instead */
.text-error-code {
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* ============================================
   AI CONVERSATION TYPOGRAPHY CLASSES
   Reusable font classes for conversation interfaces
   ============================================ */

.analytics-trend {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xxs);
}

.txt-login-header {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 33px;
  letter-spacing: -0.02em;
}

.text-base-semibold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.text-inherit-all {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.text-inherit-family {
  font-family: inherit;
}

.font-manrope {
  font-family: Manrope, sans-serif;
}

.text-base-regular {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.txt-weight-regular {
  font-weight: var(--font-weight-regular);
}

.txt-weight-semibold {
  font-weight: var(--font-weight-semibold);
}

.txt-weight-bold {
  font-weight: var(--font-weight-bold);
}

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

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

.text-xxs {
  font-size: var(--font-size-xxs);
}

.text-xxxs {
  font-size: var(--font-size-xxxs);
}

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

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

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

.weight-regular {
  font-weight: var(--font-weight-regular);
}

.weight-medium {
  font-weight: var(--font-weight-medium);
}

.weight-semibold {
  font-weight: var(--font-weight-semibold);
}

.weight-bold {
  font-weight: var(--font-weight-bold);
}

.text-md-bold {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.text-md-semibold {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.text-sm-bold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.text-sm-semibold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.text-xs-bold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.text-xs-semibold {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.text-xxs-semibold {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold);
}

.text-xxs-bold {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
}

.text-xxxs-semibold {
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-semibold);
}

.text-xxxs-bold {
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
}

.text-xxxs-medium {
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-medium);
}

.text-google-sm {
  font-family: 'Google Sans', sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.text-italic {
  font-style: italic;
}

.lh-sm {
  line-height: var(--line-height-sm);
}

.lh-xs {
  line-height: var(--line-height-xs);
}

.lh-xxs {
  line-height: var(--line-height-xxs);
}

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

.text-lg {
  font-size: var(--font-size-lg);
}

.text-md-medium-spaced {
  font-size: var(--font-size-md, 18px);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
}

.text-lg-medium-complete {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-md);
  letter-spacing: 0%;
}

.text-sm-regular {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.txt-card-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
}

.suggestion-chip-wrapper-text {
  --button-text-color: var(--text-color-placeholder);
  --button-font-size: var(--font-size-xxs);
  --button-font-weight: var(--font-weight-medium);
}

/* Font family utility classes */
.family-default {
  font-family: var(--font-family);
}

/* Monospace utility classes */
.family-geist-mono {
  font-family: var(--font-family-geist-mono);
}

.txt-mono-xxxs {
  font-size: var(--font-size-xxxs);
  font-family: var(--font-family-geist-mono);
}

.txt-mono-bold {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-geist-mono);
}

/* ============================================
   LINE HEIGHT UTILITY CLASSES
   Use these classes to apply consistent line heights (relative values)
   ============================================ */

.line-height-0 {
  line-height: 0;
}

.line-height-0-6 {
  line-height: 0.6;
}

.line-height-1 {
  line-height: 1;
}

.line-height-1-2 {
  line-height: 1.2;
}

.line-height-1-3 {
  line-height: 1.3;
}

.line-height-1-4 {
  line-height: 1.4;
}

.line-height-1-5 {
  line-height: 1.5;
}

.line-height-1-6 {
  line-height: 1.6;
}

.letter-spacing-8 {
  letter-spacing: var(--letter-spacing-8);
}

/* ============================================
   BUTTON FONT UTILITY CLASSES
   Generic classes for button text styling
   ============================================ */

.btn-text-xs {
  --button-font-size: var(--font-size-xs);
  --button-font-weight: var(--font-weight-medium);
}

.btn-text-color-gray-1500 {
  --button-width: var(--spacing-140);
  --button-text-color: var(--color-gray-1500);
}

.btn-text-sm {
  --button-font-size: var(--font-size-md);
  --button-font-weight: var(--font-weight-medium);
  --button-text-color: var(--date-picker-text-secondary-color);
}

/* ============================================
   CONFIRMATION MODAL TYPOGRAPHY
   ============================================ */

.txt-confirmation-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-neg-1);
  color: var(--text-color-primary);
}

.txt-confirmation-modal-body {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: var(--text-color-secondary);
}

.txt-modal-description-sm-centered {
  margin: 0;
  color: var(--modal-header-description-color);
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-medium);
}

.txt-modal-description-xs-centered {
  margin: 0;
  color: var(--modal-header-description-color);
  text-align: center;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-medium);
}

.txt-modal-description-xs {
  margin: 0;
  color: var(--modal-header-description-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

/* ============================================
   DATA GRID / DENSE TABLE TYPOGRAPHY
   Leaf utilities for table headers and cells. Wrapper variant: globalClasses
   DataGrid with wrapper .global-datagrid-typography-compact: headerLabelExtraClass (e.g. global-font-size-xxs), gridCellExtraClass (e.g. txt-datagrid-cell-body).
   ============================================ */

.txt-datagrid-header-meta {
  color: var(--text-color-primary-light);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
}

.txt-datagrid-cell-body {
  font-size: var(--typography-dense-xs-font-size);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
}

.txt-datagrid-grid-label-secondary {
  color: var(--text-color-primary-light);
}

/* ============================================
   INPUT FONT UTILITY CLASSES
   Generic classes for input text styling
   ============================================ */

.input-text-xs {
  --input-font-size: var(--font-size-xs);
  --input-font-weight: var(--font-weight-medium);
  --input-text-color: var(--color-gray-1800);
}

/* Force Highcharts charts to use application fonts instead of Helvetica defaults */

svg text,
.highcharts-root,
.highcharts-text,
.highcharts-label,
.highcharts-subtitle {
  font-family: var(--font-family) !important;
}

/* Override legend fonts to use application font */
.legend-name,
.legend-value,
.legend-item,
.chart-legend-name,
.chart-legend-value {
  font-family: var(--font-family) !important;
}

/* Semantic text-color utilities for emphasised numeric/status cells.
   Used by DataGrid TEXT cells with `tone: success | failure` — applies
   semibold weight + the standard 14px table-cell size so the value reads as
   the primary signal in a table row. Override is needed because the
   default `span` rule in this file sets 12px, which would otherwise win
   over the inherited <td> font-size when the value is wrapped in a span.
   Matches Breeze Dashboard Design System table amount style (600 14px/20px). */
.txt-success-text {
  color: var(--text-color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.txt-failure-text {
  color: var(--text-color-failure);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.txt-caption {
  color: var(--text-color-tertiary);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-xs);
}