/**
 * Typography Styles
 * Font: Inter Tight
 * Generated from Figma InDoctors design system
 *
 * Estrutura de cada display:
 *   1. Seletor de tamanho compartilhado (medium + bold + h tag, quando aplicável)
 *   2. Seletor de peso individual por variante
 *
 * Mapeamento heading → display:
 *   h1 = display-4 · h2 = display-5 · h3 = display-6
 *   h4 = display-7 · h5 = display-8 · h6 = display-9
 */


:root {
  /* Font family */
  --font-family-primary: 'Inter Tight', sans-serif;
  --font-family-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Display sizes */
  --display-size-display1: 180px;
  --display-size-display2: 124px;
  --display-size-display3: 102px;
  --display-size-display4: 82px;
  --display-size-display5: 72px;
  --display-size-display6: 64px;
  --display-size-display7: 46px;
  --display-size-display8: 34px;
  --display-size-display9: 22px;

  /* Text sizes */
  --text-size-xl: 20px;
  --text-size-lg: 18px;
  --text-size-md: 16px;
  --text-size-sm: 14px;
  --text-size-xs: 12px;
}


/* =========================================
   Display Styles — Responsive Fluid Typography
   vw calibrado para atingir o max exatamente em 1920px: vw = max / 1920 * 100
   ========================================= */

/* Display 1 */
.display-1-medium,
.display-1-bold {
  font-size: clamp(126px, 9.375vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.display-1-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-1-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 2 */
.display-2-medium,
.display-2-bold {
  font-size: clamp(87px, 6.458vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.display-2-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-2-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 3 */
.display-3-medium,
.display-3-bold {
  font-size: clamp(71px, 5.313vw, 102px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.display-3-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-3-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 4 → h1 */
.display-4-medium,
.display-4-bold,
h1 {
  font-size: clamp(57px, 4.271vw, 82px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.display-4-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-4-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 5 → h2 */
.display-5-medium,
.display-5-bold,
h2 {
  font-size: clamp(50px, 3.75vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.display-5-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-5-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 6 → h3 */
.display-6-medium,
.display-6-bold,
h3 {
  font-size: clamp(45px, 3.333vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.display-6-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-6-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 7 → h4 */
.display-7-medium,
.display-7-bold,
h4 {
  font-size: clamp(32px, 2.396vw, 46px);
  line-height: 1.1;
  letter-spacing: 0;
}
.display-7-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-7-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 8 → h5 */
.display-8-medium,
.display-8-bold,
h5 {
  font-size: clamp(24px, 1.771vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.015em;
}
.display-8-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-8-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }

/* Display 9 → h6 */
.display-9-medium,
.display-9-bold,
h6 {
  font-size: clamp(16px, 1.146vw, 22px);
  line-height: 1.15;
  letter-spacing: 0.023em;
}
.display-9-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }
.display-9-bold   { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); }


/* =========================================
   Text Styles
   ========================================= */

/* text-xl */
.text-xl,
.text-xl-medium {
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.15;
  letter-spacing: 0.1px;
}
.text-xl        { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); }
.text-xl-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }

/* text-lg */
.text-lg,
.text-lg-medium {
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 1.15;
  letter-spacing: 0.09px;
}
.text-lg        { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); }
.text-lg-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }

/* text-md */
.text-md,
.text-md-medium {
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.08px;
}
.text-md        { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); }
.text-md-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }

/* text-sm */
.text-sm,
.text-sm-medium {
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.07px;
}
.text-sm        { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); }
.text-sm-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }

/* text-xs */
.text-xs,
.text-xs-medium {
  font-size: clamp(11px, 0.625vw, 12px);
  line-height: 1.25;
  letter-spacing: 0.06px;
}
.text-xs        { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); }
.text-xs-medium { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); }


/* =========================================
   Mobile scale (max-width: 768px)
   ========================================= */

@media (max-width: 768px) {
  .display-1-medium, .display-1-bold                    { font-size: clamp(48px, 16.5vw, 96px); }
  .display-2-medium, .display-2-bold                    { font-size: clamp(36px, 12.3vw, 72px); }
  .display-3-medium, .display-3-bold                    { font-size: clamp(30px, 10vw,   60px); }
  .display-4-medium, .display-4-bold, h1                { font-size: clamp(24px,  8vw,   48px); }
  .display-5-medium, .display-5-bold, h2                { font-size: clamp(22px,  7vw,   42px); }
  .display-6-medium, .display-6-bold, h3                { font-size: clamp(20px,  6.5vw, 38px); }
  .display-7-medium, .display-7-bold, h4                { font-size: clamp(20px,  5.87vw,34px); }
  .display-8-medium, .display-8-bold, h5                { font-size: clamp(18px,  5.33vw,30px); }
  .display-9-medium, .display-9-bold, h6                { font-size: 18px; }
  .text-xl, .text-xl-medium                             { font-size: 16px; }
}