@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/*
 * Global text colour tokens.
 *
 * The site defaults to a dark surface. The light-surface values are kept as
 * separate semantic tokens so cards and content areas can select the correct
 * foreground without introducing component-specific colour values.
 */
:root {
  --color-text-body: #333333;
  --color-text-muted: #595959;
  --color-text-body-on-dark: #ffffff;
  --color-text-muted-on-dark: #c4c4c4;
}

body {
  --color-text-body-current: var(--color-text-body-on-dark);
  --color-text-muted-current: var(--color-text-muted-on-dark);
  color: var(--color-text-body-current);
}

p,
li,
td {
  color: inherit;
}

/* Apply these surface hooks to containers, not individual text elements. */
[data-color-surface="light"],
.text-surface-light {
  --color-text-body-current: var(--color-text-body);
  --color-text-muted-current: var(--color-text-muted);
  color: var(--color-text-body-current);
}

[data-color-surface="dark"],
.text-surface-dark {
  --color-text-body-current: var(--color-text-body-on-dark);
  --color-text-muted-current: var(--color-text-muted-on-dark);
  color: var(--color-text-body-current);
}

.text-muted,
[data-text-tone="muted"] {
  color: var(--color-text-muted-current) !important;
}

/* Keep long-form copy within a readable line length. */
.prose,
.entry-content {
  width: 100%;
  max-width: 68ch;
}

.prose--wide {
  max-width: 75ch;
}

.section--full > .prose {
  margin-inline: auto;
}

/* CMS content can contain full-width media, tables and cards. Limit only its
 * copy so those elements can continue to use the available content column. */
.blog-content :where(p, ul, ol, blockquote),
.blog__text_content :where(p, ul, ol, blockquote) {
  max-width: 68ch;
}

.blog-content :where(h1, h2, h3, h4, h5, h6),
.blog__text_content :where(h1, h2, h3, h4, h5, h6) {
  max-width: 75ch;
}