/* Quiet paper: the site's look, as a layer over the U.S. Web Design System.

   Warm paper on a stone page, near-black ink with a brown cast, one deep green for
   everything that can be acted on, serif titles and a clean sans for the rest. Every
   text and control pairing here clears WCAG AA (4.5:1 for text, 3:1 for controls);
   the ratios are in docs/decisions.md. Change the look by changing the tokens below.

   The fonts are Source Serif 4 and Inter, variable fonts under the SIL Open Font
   License, served from this site (static/vendor/fonts) so no page asks another
   host for a font. No inline styles anywhere: the Content Security Policy blocks them. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../vendor/fonts/source-serif-4-latin-wght-normal.fb34450b3254.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../vendor/fonts/source-serif-4-latin-ext-wght-normal.d903af399404.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../vendor/fonts/source-serif-4-latin-wght-italic.9be147cef3b5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --qp-stone: #e7e2d8;
  --qp-paper: #faf7f2;
  --qp-card: #fffdf9;
  --qp-ink: #23201c;
  --qp-muted: #5a5348;
  --qp-line: #d3caba;
  --qp-control: #6f665a;
  --qp-accent: #1f5c4d;
  --qp-accent-deep: #164539;
  --qp-tint: #efe6d3;
  --qp-attention: #8a3b1e;
  --qp-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --qp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sympraxi-line: var(--qp-line);
}

/* The page, and the paper column the content sits on. */
body {
  background: var(--qp-stone);
  color: var(--qp-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.sympraxi-main {
  background: var(--qp-paper);
  border: 1px solid var(--qp-line);
  border-radius: 0.375rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

@media (max-width: 40em) {
  .sympraxi-main {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin-top: 0;
  }
}

/* Type. The doubled :root outranks USWDS's own selectors without !important. */
:root:root :is(body, p, li, dd, dt, td, th, label, legend, span, a, div, button, input, select, textarea, summary, caption, figcaption, small, strong, em, blockquote, nav) {
  font-family: var(--qp-sans);
}

:root:root :is(h1, h2, h3, h4, h5, h6, .usa-logo__text, .usa-logo__text a, .sympraxi-tile__value) {
  font-family: var(--qp-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--qp-ink);
}

:root:root h1 {
  font-size: 2.25rem;
  line-height: 1.15;
}

:root:root h2 {
  font-size: 1.625rem;
  line-height: 1.25;
}

:root:root h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

:root:root h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
}

:root:root .sympraxi-lead {
  font-family: var(--qp-serif);
  font-size: 1.3125rem;
  line-height: 1.5;
}

:root:root .sympraxi-eyebrow {
  color: var(--qp-accent);
  font-size: 0.8125rem;
}

::selection {
  background: #cfe0d9;
  color: var(--qp-ink);
}

/* Hints and secondary text: darker than USWDS's gray, which is just under AA on paper. */
:root:root :is(.usa-hint, .text-base, .text-base-dark) {
  color: var(--qp-muted);
}

/* Links, and everything that can be acted on, in the one green. */
:root:root :is(.sympraxi-content a, .usa-footer a, .usa-breadcrumb__link, .usa-link):not(.usa-button) {
  color: var(--qp-accent);
}

:root:root :is(.sympraxi-content a, .usa-footer a, .usa-breadcrumb__link, .usa-link):not(.usa-button):hover {
  color: var(--qp-accent-deep);
}

:root:root .sympraxi-content a:not(.usa-button):visited {
  color: #4a3f6b;
}

:root:root .usa-button {
  background: var(--qp-accent);
  border-radius: 0.25rem;
  color: #fff;
  font-weight: 600;
}

:root:root .usa-button:hover {
  background: #174c40;
  color: #fff;
}

:root:root .usa-button:active {
  background: var(--qp-accent-deep);
}

:root:root .usa-button--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--qp-accent);
  color: var(--qp-accent);
}

:root:root .usa-button--outline:hover {
  background: var(--qp-tint);
  box-shadow: inset 0 0 0 2px var(--qp-accent-deep);
  color: var(--qp-accent-deep);
}

:root:root .usa-button--unstyled {
  background: transparent;
  color: var(--qp-accent);
  font-weight: 400;
  text-decoration: underline;
}

:root:root .usa-button--unstyled:hover {
  background: transparent;
  color: var(--qp-accent-deep);
}

/* The header and footer. */
:root:root .usa-header--basic {
  background: var(--qp-card);
  border-bottom: 1px solid var(--qp-line);
}

:root:root .usa-logo__text a {
  color: var(--qp-ink);
  font-size: 1.5rem;
}

:root:root .usa-nav {
  background: var(--qp-card);
}

:root:root .usa-nav-link,
:root:root .sympraxi-nav-button.usa-button--unstyled {
  color: var(--qp-muted);
}

:root:root .usa-nav-link:hover,
:root:root .sympraxi-nav-button.usa-button--unstyled:hover {
  color: var(--qp-accent);
}

:root:root .usa-menu-btn {
  background: var(--qp-accent);
  border-radius: 0.25rem;
}

:root:root .usa-footer,
:root:root .usa-footer__primary-section {
  background: #dcd5c6;
  color: var(--qp-ink);
}

:root:root .usa-breadcrumb {
  background: transparent;
}

/* Alerts and tags: tinted paper with a green edge instead of USWDS's cyan. */
:root:root .usa-alert {
  background: var(--qp-tint);
  color: var(--qp-ink);
}

:root:root .usa-alert--info::before,
:root:root .usa-alert--info,
:root:root .usa-alert--success {
  border-left-color: var(--qp-accent);
}

:root:root .usa-alert--info::before,
:root:root .usa-alert--success::before {
  background-color: var(--qp-accent);
}

:root:root .usa-tag {
  background: var(--qp-muted);
  border-radius: 0.25rem;
  color: #fff;
}

/* Tables and fields. */
:root:root .usa-table thead th {
  background: var(--qp-tint);
  color: var(--qp-ink);
}

:root:root :is(.usa-input, .usa-select, .usa-textarea, .usa-file-input) {
  background-color: #fff;
  border: 1px solid var(--qp-control);
  border-radius: 0.25rem;
}

/* Cards and tiles. */
:root:root :is(.sympraxi-panel, .sympraxi-tile) {
  background: var(--qp-card);
  border-color: var(--qp-line);
  border-radius: 0.375rem;
}

:root:root .sympraxi-tile--attention {
  border-color: var(--qp-attention);
}

:root:root .sympraxi-tile__value {
  font-size: 2.25rem;
}

:root:root .sympraxi-row--now {
  background: var(--qp-tint);
}

:root:root :is(.sympraxi-jump ul, .sympraxi-faq, .sympraxi-videos__poster img) {
  border-color: var(--qp-line);
}

:root:root .sympraxi-details summary {
  color: var(--qp-accent);
}

:root:root .sympraxi-language a {
  color: var(--qp-accent);
}