/**
 * protrion-typography.css
 * Protrion Design System — Typography
 *
 * Imports Google Fonts and provides typographic utility classes.
 * Requires: protrion-variables.css
 * Version: 1.0.0
 *
 * Fonts used:
 *   Manrope      — body, UI, labels (weights: 300–800)
 *   Space Grotesk — headings, display (weights: 300–700)
 *   JetBrains Mono — code, terminal (weights: 400, 500)
 */

/* ??? Google Fonts Import ????????????????????????????????????????????????? */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ??? Base Typography Reset ??????????????????????????????????????????????? */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px base */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primary, #FFFFFF);
  background-color: var(--color-bg-primary, #100F13);
}

/* ??? Heading Elements ???????????????????????????????????????????????????? */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-display-xl);   /* 72px */
  line-height: var(--line-height-display-xl);
}

h2 {
  font-size: var(--text-display-lg);   /* 48px */
  line-height: var(--line-height-display-lg);
}

h3 {
  font-size: var(--text-display-md);   /* 24px */
  line-height: var(--line-height-display-md);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--text-body-xl);      /* 20px */
  line-height: var(--line-height-body);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-size: var(--text-body-lg);      /* 18px */
  line-height: var(--line-height-body);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

h6 {
  font-size: var(--text-body-md);      /* 16px */
  line-height: var(--line-height-body);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

/* ??? Body Text ??????????????????????????????????????????????????????????? */

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-body-md);
  line-height: var(--line-height-body);
}

p:last-child {
  margin-bottom: 0;
}

/* ??? Links ??????????????????????????????????????????????????????????????? */

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast, 150ms ease),
              text-decoration-color var(--transition-fast, 150ms ease);
}

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

a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ??? Code & Preformatted ????????????????????????????????????????????????? */

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-code-bg, var(--color-neutral-900));
  color: var(--color-code-text, #E2E8F0);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  background-color: var(--color-code-bg, var(--color-neutral-900));
  color: var(--color-code-text, #E2E8F0);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ??? Lists ??????????????????????????????????????????????????????????????? */

ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-1);
  line-height: var(--line-height-body);
}

/* ??? Utility Classes ????????????????????????????????????????????????????? */

/* Display scale — Space Grotesk */

.text-hero {
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  line-height: var(--line-height-display-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--line-height-display-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--line-height-display-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--line-height-display-md);
  font-weight: var(--font-weight-semibold);
}

/* Body scale — Manrope */

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

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

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

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

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

.text-label {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}

.text-code {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

/* Color utility classes */

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }
.text-on-accent { color: var(--color-text-on-accent); }

/* Weight utility classes */

.font-light     { font-weight: var(--font-weight-light); }
.font-regular   { font-weight: var(--font-weight-regular); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }