/*---------------------
TYPOGRAPHY
-----------------------*/

/**--------
Typography Tokens
--------**/

:root {
  /*Font Size Tokens*/
  --type-size-100: 0.76rem; /* captions, labels, meta*/
  --type-size-110: 12px; /*variant, if we decide to go px*/
  --type-size-200: 0.89rem; /* secondary text, small UI*/
  --type-size-210: 14px; /*variant, if we decide to go px*/
  --type-size-300: 1rem; /* base body*/
  --type-size-400: 1.1rem; /* enlarged body, default*/
  --type-size-500: 1.44rem;
  --type-size-600: 1.89rem;
  --type-size-700: 2.33rem;

  /*Font Weight Tokens*/
  --type-weight-100: 200;
  --type-weight-400: 300; /*default. The potential confusion cuased by QAB numbering system and CSS standard font weight encoding is accepted as a minor drawback, but teh QAB system logic/integrity must be kept up*/
  --type-weight-500: 400; /*Note: the local typeface used by the time of development doesn't provide a 400 weight font*/
  --type-weight-600: 600;
  --type-weight-700: 800;

  /*Line Height Tokens*/
  --type-leading-100: 1.1; /* tight, headings*/
  --type-leading-200: 1.3; /* marginal, small UI*/
  --type-leading-400: 1.44; /* default, body text*/
  --type-leading-500: 1.78; /* comfortable long-form reading*/

  /*Letter Spacing Tokens*/
  --type-tracking-100: -0.02em;
  --type-tracking-400: 0em;
  --type-tracking-500: 0.05em; /* UI labels, small caps            */
  --type-tracking-700: 0.1em; /* uppercase micro labels           */

  /*Semantic Typography Tokens*/
  --type-size-form-labels-400:var(--type-size-100);
}

/**--------
Typography Base
--------**/

body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: var(--type-weight-400);
  line-height: var(--type-leading-400);
}

p {
  font-weight: var(--type-weight-400);
}

/**--------
Spacing
--------**/

h1,
h2,
h2,
h3,
h4,
h5 {
  line-height: var(--type-leading-100);
}

h6 {
  line-height: var(--type-leading-400);
}

h1,
h2 {
  letter-spacing: var(--type-tracking-100);
}

/**--------
Font Sizes
--------**/

h1,
h2 {
  font-size: var(--type-size-700);
}

h3 {
  font-size: var(--type-size-600);
}

h4 {
  font-size: var(--type-size-500);
}

h5 {
  font-size: var(--type-size-500);
}

h6 {
  font-size: var(--type-size-400);
}

/**--------
Font Weights
--------**/

h1,
h3,
h4 {
  font-weight: var(--type-weight-600);
}

h2,
h5 {
  font-weight: var(--type-weight-100);
}

h6 {
  /*Inline heading*/
  font-weight: var(--type-weight-700);
}

/**--------
Typography Refinements
--------**/

/***-----
lead paragraph
Slightly enlarged introductory paragraph. Applied as a class
on a <p> element so it does not pollute the global <p> rule.
-----***/

.lead {
  font-size: var(--type-size-400);
  line-height: var(--type-leading-500);
}

/***-----
text variant classes
-----***/

/* Secondary / small text — also applied natively to <small> */
small,
.text-small {
  font-size: var(--type-size-200);
}

/* Micro-label: uppercase, tracked, used for kickers and metadata */
.text-meta {
  font-size: var(--type-size-100);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
}

/***-----
blockquote
Left-bordered pull quote using the primary color scale.
-----***/

blockquote {
  border-left: var(--border-width-200) solid var(--color-primary-300);
  padding: 0.4rem 0 0.4rem 1.25rem;
  font-style: italic;
  margin-bottom: 1rem;
}

blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: var(--type-size-200);
}

/***-----
inline code and code block
<code> is inline; <pre><code> is a block. The <pre> rule handles
scrollable overflow for long lines.
-----***/

code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 0.875em; /* relative to context, not root */
  background: var(--color-gray-cool-200);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

pre {
  background: var(--color-gray-cool-200);
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  padding: var(--layout-space-400);
  overflow-x: auto;
  font-size: var(--type-size-200);
  line-height: var(--type-leading-500);
  margin-bottom: 1rem;
}

pre code {
  /* Reset inline code overrides inside a block */
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/***-----
lists
The reset removes all list styling. These classes restore it
selectively — applied only where a visual list is actually intended.
-----***/

.list-styled {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

ul.list-styled {
  list-style: disc;
}
ol.list-styled {
  list-style: decimal;
}

.list-styled li + li {
  margin-top: 0.35rem;
}

/* Utility to undo reset on a list without changing its visual style */
.list-plain {
  list-style: none;
  padding: 0;
}