/* ============================================================
   BrokerHub Typography System
   ============================================================ */

:root {
  /* Font Families */
  --font-heading: 'Gabarito', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-numeric: 'Roboto Mono', monospace;

  /* Headings */
  --font-heading-1: var(--font-heading); /* H1 Primary Heading */
  --font-heading-1--weight: 600; /* SemiBold */
  --font-heading-1--size: 48px;

  --font-heading-2: var(--font-heading); /* H2 Secondary Heading */
  --font-heading-2--weight: 600; /* SemiBold */
  --font-heading-2--size: 36px;

  --font-heading-3: var(--font-heading); /* H3 Tertiary Heading */
  --font-heading-3--weight: 600; /* SemiBold */
  --font-heading-3--size: 24px;

  --font-heading-4: var(--font-heading); /* H4 Sub Heading */
  --font-heading-4--weight: 500; /* Medium */
  --font-heading-4--size: 18px;

  /* Body Text */
  --font-body-regular: var(--font-body); /* Body */
  --font-body-regular--weight: 400; /* Regular */
  --font-body-regular--size: 15px;

  --font-body-emphasis: var(--font-body); /* Body Emphasis */
  --font-body-emphasis--weight: 600; /* SemiBold */
  --font-body-emphasis--size: 15px;

  --font-body-underlined: var(--font-body); /* Body Underlined */
  --font-body-underlined--weight: 400; /* Regular */
  --font-body-underlined--size: 15px;

  /* Detail Text */
  --font-detail-regular: var(--font-body); /* Detail Regular */
  --font-detail-regular--weight: 400; /* Regular */
  --font-detail-regular--size: 12px;

  --font-detail-underlined: var(--font-body); /* Detail Underlined */
  --font-detail-underlined--weight: 400; /* Regular */
  --font-detail-underlined--size: 12px;

  --font-detail-emphasis: var(--font-body); /* Detail Emphasis */
  --font-detail-emphasis--weight: 600; /* SemiBold */
  --font-detail-emphasis--size: 12px;

  --font-detail-small-regular: var(--font-body); /* Detail Small Regular */
  --font-detail-small-regular--weight: 400; /* Regular */
  --font-detail-small-regular--size: 9px;

  --font-detail-small-emphasis: var(--font-body); /* Detail Small Emphasis */
  --font-detail-small-emphasis--weight: 600; /* SemiBold */
  --font-detail-small-emphasis--size: 9px;

  /* Numerical Text */
  --font-numeric-large: var(--font-numeric); /* Numerical Large */
  --font-numeric-large--weight: 400; /* Regular */
  --font-numeric-large--size: 24px;

  --font-numeric-regular: var(--font-numeric); /* Numerical Regular */
  --font-numeric-regular--weight: 400; /* Regular */
  --font-numeric-regular--size: 15px;

  --font-numeric-emphasis: var(--font-numeric); /* Numerical Emphasis */
  --font-numeric-emphasis--weight: 500; /* Medium */
  --font-numeric-emphasis--size: 15px;

  --font-numeric-small: var(--font-numeric); /* Numerical Small */
  --font-numeric-small--weight: 400; /* Regular */
  --font-numeric-small--size: 12px;

  --font-numeric-small-emphasis: var(--font-numeric); /* Numerical Small Emphasis */
  --font-numeric-small-emphasis--weight: 500; /* Medium */
  --font-numeric-small-emphasis--size: 12px;
}

/* ============================================================
   Heading Classes
   ============================================================ */
.heading-1, .h1-custom {
  font-family: var(--font-heading-1);
  font-weight: var(--font-heading-1--weight);
  font-size: var(--font-heading-1--size);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.heading-2, .h2-custom {
  font-family: var(--font-heading-2);
  font-weight: var(--font-heading-2--weight);
  font-size: var(--font-heading-2--size);
  line-height: 1.25;
}

.heading-3, .h3-custom {
  font-family: var(--font-heading-3);
  font-weight: var(--font-heading-3--weight);
  font-size: var(--font-heading-3--size);
  line-height: 1.3;
}

.heading-4, .h4-custom {
  font-family: var(--font-heading-4);
  font-weight: var(--font-heading-4--weight);
  font-size: var(--font-heading-4--size);
  line-height: 1.4;
}

/* Override Bootstrap heading styles */
h1, .h1 {
  font-family: var(--font-heading-1);
  font-weight: var(--font-heading-1--weight);
  font-size: var(--font-heading-1--size);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-family: var(--font-heading-2);
  font-weight: var(--font-heading-2--weight);
  font-size: var(--font-heading-2--size);
  line-height: 1.25;
}

h3, .h3 {
  font-family: var(--font-heading-3);
  font-weight: var(--font-heading-3--weight);
  font-size: var(--font-heading-3--size);
  line-height: 1.3;
}

h4, .h4 {
  font-family: var(--font-heading-4);
  font-weight: var(--font-heading-4--weight);
  font-size: var(--font-heading-4--size);
  line-height: 1.4;
  color: var(--color-neutral--700);
}

/* ============================================================
   Body Text Classes
   ============================================================ */
.body-regular, body, p {
  font-family: var(--font-body-regular);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
  line-height: 1.5;
}

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

.body-underlined {
  font-family: var(--font-body-underlined);
  font-weight: var(--font-body-underlined--weight);
  font-size: var(--font-body-underlined--size);
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Detail Text Classes
   ============================================================ */
.detail-regular {
  font-family: var(--font-detail-regular);
  font-weight: var(--font-detail-regular--weight);
  font-size: var(--font-detail-regular--size);
  line-height: 1.4;
}

.detail-underlined {
  font-family: var(--font-detail-underlined);
  font-weight: var(--font-detail-underlined--weight);
  font-size: var(--font-detail-underlined--size);
  line-height: 1.4;
  text-decoration: underline;
  cursor: pointer;
}

.detail-emphasis {
  font-family: var(--font-detail-emphasis);
  font-weight: var(--font-detail-emphasis--weight);
  font-size: var(--font-detail-emphasis--size);
  line-height: 1.4;
}

.detail-small-regular {
  font-family: var(--font-detail-small-regular);
  font-weight: var(--font-detail-small-regular--weight);
  font-size: var(--font-detail-small-regular--size);
  line-height: 1.4;
}

.detail-small-emphasis {
  font-family: var(--font-detail-small-emphasis);
  font-weight: var(--font-detail-small-emphasis--weight);
  font-size: var(--font-detail-small-emphasis--size);
  line-height: 1.4;
}

/* ============================================================
   Numerical Styles
   ============================================================ */
.numeric-large {
  font-family: var(--font-numeric-large);
  font-weight: var(--font-numeric-large--weight);
  font-size: var(--font-numeric-large--size);
  line-height: 1.3;
}

.numeric-regular {
  font-family: var(--font-numeric-regular);
  font-weight: var(--font-numeric-regular--weight);
  font-size: var(--font-numeric-regular--size);
  line-height: 1.3;
}

.numeric-emphasis {
  font-family: var(--font-numeric-emphasis);
  font-weight: var(--font-numeric-emphasis--weight);
  font-size: var(--font-numeric-emphasis--size);
  line-height: 1.3;
}

.numeric-small {
  font-family: var(--font-numeric-small);
  font-weight: var(--font-numeric-small--weight);
  font-size: var(--font-numeric-small--size);
  line-height: 1.3;
}

.numeric-small-emphasis {
  font-family: var(--font-numeric-small-emphasis);
  font-weight: var(--font-numeric-small-emphasis--weight);
  font-size: var(--font-numeric-small-emphasis--size);
  line-height: 1.3;
}

/* ============================================================
   Form & Input Overrides
   ============================================================ */
.form-control, .form-select, .form-check-label {
  font-family: var(--font-body-regular);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
}

.form-label {
  font-family: var(--font-body-emphasis);
  font-weight: var(--font-body-emphasis--weight);
  font-size: var(--font-body-regular--size);
}

.form-text {
  font-family: var(--font-detail-regular);
  font-weight: var(--font-detail-regular--weight);
  font-size: var(--font-detail-regular--size);
}

/* ============================================================
   Button Typography
   ============================================================ */
.btn {
  font-family: var(--font-body-emphasis);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
  line-height: 100%;
  padding-left: var(--bs-spacing-lg);
  padding-right: var(--bs-spacing-lg);
}

.btn-sm {
  font-size: var(--font-detail-regular--size);
}

.btn.disabled {
  --bs-btn-disabled-bg: #6c757d;
  opacity: 100%;
}

/* ============================================================
   Table Typography
   ============================================================ */
.table th {
  font-family: var(--font-body-emphasis);
  font-weight: var(--font-body-emphasis--weight);
  font-size: var(--font-body-regular--size);
  color: var(--color-neutral--800);
  line-height: 1;
}

.table td {
  font-family: var(--font-body-regular);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
  line-height: 1;
  color: var(--color-neutral--700);
}

/* ============================================================
   Card Typography
   ============================================================ */
.card-title {
  font-family: var(--font-heading-4);
  font-weight: var(--font-heading-4--weight);
  font-size: var(--font-heading-4--size);
  line-height: 1.4;
}

.card-subtitle {
  font-family: var(--font-detail-emphasis);
  font-weight: var(--font-detail-emphasis--weight);
  font-size: var(--font-detail-emphasis--size);
}

.card-text {
  font-family: var(--font-body-regular);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
}

/* ============================================================
   Badge & Alert Typography
   ============================================================ */
.badge {
  --bs-badge-padding-y: var(--bs-spacing-sm);
  --bs-badge-padding-x: var(--bs-spacing-3md);
  --bs-badge-border-radius: var(--bs-spacing-2md);
  font-family: var(--font-detail-emphasis);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
}

.alert {
  font-family: var(--font-body-regular);
  font-weight: var(--font-body-regular--weight);
  font-size: var(--font-body-regular--size);
}

/* ============================================================
   Responsive Typography
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --font-heading-1--size: 36px;
    --font-heading-2--size: 28px;
    --font-heading-3--size: 20px;
    --font-heading-4--size: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-heading-1--size: 28px;
    --font-heading-2--size: 24px;
    --font-heading-3--size: 18px;
    --font-heading-4--size: 16px;
  }
}