/* ============================================================
   BIO2TWIN DESIGN SYSTEM V1
   TYPOGRAPHY AUTHORITY

   HARD RULE:
   NEW PAGES MAY NOT INVENT FONT SIZES.
   ============================================================ */

:root {
  /* Typography */
  --bt-text-display: 32px;
  --bt-text-h2: 24px;
  --bt-text-h3: 18px;
  --bt-text-lead: 15px;
  --bt-text-body: 14px;
  --bt-text-button: 13px;
  --bt-text-small: 12px;
  --bt-text-meta: 11px;
  --bt-text-chip: 11px;

  /* Line heights */
  --bt-line-display: 1.18;
  --bt-line-heading: 1.30;
  --bt-line-body: 1.65;
  --bt-line-ui: 1.35;

  /* Weights */
  --bt-weight-regular: 400;
  --bt-weight-medium: 500;
  --bt-weight-semibold: 600;
  --bt-weight-bold: 700;

  /* Widths */
  --bt-page-max: 1180px;
  --bt-content-max: 960px;
  --bt-reading-max: 760px;

  /* Spacing */
  --bt-space-1: 4px;
  --bt-space-2: 8px;
  --bt-space-3: 12px;
  --bt-space-4: 16px;
  --bt-space-5: 20px;
  --bt-space-6: 24px;
  --bt-space-8: 32px;
  --bt-space-10: 40px;
  --bt-space-12: 48px;
  --bt-space-16: 64px;
  --bt-space-18: 72px;

  /* Radius */
  --bt-radius-sm: 8px;
  --bt-radius-md: 12px;
  --bt-radius-lg: 16px;
  --bt-radius-xl: 20px;
}


/* ============================================================
   GLOBAL TYPOGRAPHY AUTHORITY
   Only applies when page opts into bt-design-system
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.bt-design-system {
  font-size: var(--bt-text-body) !important;
  line-height: var(--bt-line-body) !important;
}

body.bt-design-system h1 {
  font-size: var(--bt-text-display) !important;
  line-height: var(--bt-line-display) !important;
  font-weight: var(--bt-weight-semibold) !important;
  letter-spacing: -0.025em !important;
}

body.bt-design-system h2 {
  font-size: var(--bt-text-h2) !important;
  line-height: var(--bt-line-heading) !important;
  font-weight: var(--bt-weight-semibold) !important;
  letter-spacing: -0.018em !important;
}

body.bt-design-system h3 {
  font-size: var(--bt-text-h3) !important;
  line-height: var(--bt-line-heading) !important;
  font-weight: var(--bt-weight-semibold) !important;
}

body.bt-design-system p,
body.bt-design-system li,
body.bt-design-system label,
body.bt-design-system input,
body.bt-design-system textarea,
body.bt-design-system select {
  font-size: var(--bt-text-body) !important;
  line-height: var(--bt-line-body) !important;
}

body.bt-design-system button,
body.bt-design-system [role="button"],
body.bt-design-system .button,
body.bt-design-system .btn {
  font-size: var(--bt-text-button) !important;
  line-height: var(--bt-line-ui) !important;
}

body.bt-design-system small,
body.bt-design-system .small,
body.bt-design-system .caption {
  font-size: var(--bt-text-small) !important;
}

body.bt-design-system .meta,
body.bt-design-system .eyebrow,
body.bt-design-system .overline {
  font-size: var(--bt-text-meta) !important;
}

body.bt-design-system .chip,
body.bt-design-system .pill,
body.bt-design-system .tag {
  font-size: var(--bt-text-chip) !important;
}


/* ============================================================
   SEMANTIC CLASSES
   ============================================================ */

.bt-display {
  font-size: var(--bt-text-display) !important;
  line-height: var(--bt-line-display) !important;
}

.bt-h2 {
  font-size: var(--bt-text-h2) !important;
  line-height: var(--bt-line-heading) !important;
}

.bt-h3 {
  font-size: var(--bt-text-h3) !important;
  line-height: var(--bt-line-heading) !important;
}

.bt-lead {
  font-size: var(--bt-text-lead) !important;
}

.bt-body {
  font-size: var(--bt-text-body) !important;
}

.bt-small {
  font-size: var(--bt-text-small) !important;
}

.bt-meta {
  font-size: var(--bt-text-meta) !important;
}

.bt-chip {
  font-size: var(--bt-text-chip) !important;
}


/* ============================================================
   LAYOUT TOKENS
   ============================================================ */

.bt-page {
  width: min(var(--bt-page-max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.bt-content {
  width: 100%;
  max-width: var(--bt-content-max);
  margin-left: auto;
  margin-right: auto;
}

.bt-reading {
  width: 100%;
  max-width: var(--bt-reading-max);
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   DAY1 PRODUCT PAGE
   Not a marketing landing page.
   Keep typography quiet and compact.
   ============================================================ */

body.bt-design-system.bt-day1 main {
  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.bt-design-system.bt-day1 h1 {
  max-width: 760px !important;
}

body.bt-design-system.bt-day1 p {
  max-width: 720px !important;
}

body.bt-design-system.bt-day1 section {
  margin-top: var(--bt-space-10);
  margin-bottom: var(--bt-space-10);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:768px) and (max-width:1279px) {
  :root {
    --bt-text-display: 28px;
    --bt-text-h2: 22px;
    --bt-text-h3: 17px;

    --bt-page-max: 920px;
    --bt-content-max: 840px;
    --bt-reading-max: 720px;
  }

  body.bt-design-system.bt-day1 main {
    width: min(840px, calc(100% - 40px)) !important;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:767px) {
  :root {
    --bt-text-display: 25px;
    --bt-text-h2: 20px;
    --bt-text-h3: 16px;

    --bt-text-lead: 14px;
    --bt-text-body: 13px;
    --bt-text-button: 13px;
    --bt-text-small: 11px;
    --bt-text-meta: 11px;
    --bt-text-chip: 11px;
  }

  .bt-page {
    width: calc(100% - 28px);
  }

  body.bt-design-system.bt-day1 main {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }
}

/* BIO2TWIN STATE PAGE TYPOGRAPHY V1 START */

/*
  State Pages are product/observation interfaces,
  not oversized marketing pages.
*/

body.bt-design-system.bt-state-page {
  font-size: var(--bt-text-body) !important;
}

body.bt-design-system.bt-state-page h1 {
  font-size: var(--bt-text-display) !important;
}

body.bt-design-system.bt-state-page h2 {
  font-size: var(--bt-text-h2) !important;
}

body.bt-design-system.bt-state-page h3 {
  font-size: var(--bt-text-h3) !important;
}

body.bt-design-system.bt-state-page p,
body.bt-design-system.bt-state-page li,
body.bt-design-system.bt-state-page label {
  font-size: var(--bt-text-body) !important;
}

body.bt-design-system.bt-state-page button,
body.bt-design-system.bt-state-page [role="button"] {
  font-size: var(--bt-text-button) !important;
}

body.bt-design-system.bt-state-page .meta,
body.bt-design-system.bt-state-page .eyebrow,
body.bt-design-system.bt-state-page .overline {
  font-size: var(--bt-text-meta) !important;
}

body.bt-design-system.bt-state-page .chip,
body.bt-design-system.bt-state-page .pill,
body.bt-design-system.bt-state-page .tag {
  font-size: var(--bt-text-chip) !important;
}

/* Prevent old page-local oversized headings from winning */
body.bt-design-system.bt-state-page [class*="title"] {
  max-font-size: none;
}

/* BIO2TWIN STATE PAGE TYPOGRAPHY V1 END */