/* ==========================================================================
   OpenCode Terminal Brutalist — Typography Scale
   Based on opencode.ai DESIGN.md
   ========================================================================== */

/* -- Font stack ---------------------------------------------------------- */

:root {
  /*
     Berkeley Mono is the brand font but requires a license.
     IBM Plex Mono is the free fallback used by the opencode.ai docs.
     Add Berkeley Mono at the front if you have it: "Berkeley Mono, "
  */
  --font-mono-brand: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                     Monaco, Consolas, "Liberation Mono", "Courier New",
                     monospace;
  --font-mono-docs:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                     Monaco, Consolas, "Liberation Mono", "Courier New",
                     monospace;
}

/* -- Google Fonts import ------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* -- Base element defaults ----------------------------------------------- */

body {
  font-family: var(--font-mono-brand);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

/* -- Heading defaults ---------------------------------------------------- */

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

h1 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.3; }
h2 { font-size: 28px; font-weight: 700; line-height: 42px; }  /* headline-product */
h3 { font-size: 24px; font-weight: 700; line-height: 36px; }  /* headline-page   */
h4 { font-size: 16px; font-weight: 700; line-height: 24px; }  /* section-title    */
h5 { font-size: 16px; font-weight: 600; line-height: 24px; }  /* label-strong     */
h6 { font-size: 16px; font-weight: 400; line-height: 24px; }  /* label            */

/* -- Utility classes matching the full spec scale ------------------------ */

.headline-display {
  font-family: var(--font-mono-brand);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.headline-product {
  font-family: var(--font-mono-brand);
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0;
}

.headline-page {
  font-family: var(--font-mono-brand);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
}

.docs-title {
  font-family: var(--font-mono-docs);
  font-size: 26px;
  font-weight: 500;
  line-height: 31.2px;
  letter-spacing: -0.5px;
}

.section-title {
  font-family: var(--font-mono-brand);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
}

.body-lg {
  font-family: var(--font-mono-brand);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

.body-md {
  font-family: var(--font-mono-brand);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.body-docs {
  font-family: var(--font-mono-docs);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
}

.label {
  font-family: var(--font-mono-brand);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.label-sm {
  font-family: var(--font-mono-docs);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 0;
}