/*
 * The marketing site's fonts and palette, copied from
 * app/orature-site/site/static/site.css (its block from the first
 * @font-face to "Base") and held equal to it by
 * TestBrandCopiesMatchTheMarketingSite. Edit the site's stylesheet, then
 * copy the block here again; never edit it here (R17).
 */

@font-face {
  font-family: "Besley";
  src: url("fonts/besley-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --serif: "Besley", "Clarendon", "Rockwell", Georgia, serif;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;

  --page: #F4F7EF;
  --ink: #0E2A1F;
  --paper: #FCFDF9;
  --mint: #D3E6D0;
  --tint: #DDEBDC;
  --muted: #3F5A4D;
  --faint: #5B7366;
  --label: #2F4A3D;
  --code-str: #2E5622;
  --code-num: #6E3A00;
  --hl: #FFE65A;
  --on-hl: #0E2A1F;
  --on-ink: #F4F7EF;
  --link-hover: #2445C7;

  /* The publishers band and the footer: dark in both modes. */
  --deep: #0E2A1F;
  --deep-text: #EEF3E6;
  --deep-muted: #B8C9BA;
  --deep-soft: #D5E0D3;
  --deep-rule: rgba(238, 243, 230, 0.35);

  /* The Orature box in the marketplace diagram: the inverse of a card. */
  --hub: #0E2A1F;
  --hub-text: #EEF3E6;
  --hub-sub: #D5E0D3;

  --rule: color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 35%, transparent);
  --shadow-card: 0 1px 0 rgba(14, 42, 31, 0.25), 0 18px 26px -18px rgba(14, 42, 31, 0.5);
  --shadow-hero: 0 1px 0 rgba(14, 42, 31, 0.25), 0 34px 48px -30px rgba(14, 42, 31, 0.55);
  --shadow-slip: 0 16px 26px -18px rgba(14, 42, 31, 0.55);
  --shadow-token: 0 10px 16px -12px rgba(14, 42, 31, 0.6);
  --shadow-ledger: 0 30px 50px -24px rgba(0, 0, 0, 0.7);

  --gutter: clamp(20px, 5.6cqi, 80px);
  --band-y: clamp(56px, 8cqi, 120px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0B1A14;
    --ink: #E6EEE2;
    --paper: #1B3328;
    --mint: #13291F;
    --tint: #24392F;
    --muted: #A7BBAC;
    --faint: #8FA597;
    --label: #B4C6B7;
    --code-str: #A8D98A;
    --code-num: #FFC46B;
    --on-hl: #0B1A14;
    --on-ink: #0B1A14;
    --link-hover: #FFE65A;

    --deep: #050E0A;

    --hub: #E6EEE2;
    --hub-text: #0B1A14;
    --hub-sub: #3F5A4D;

    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.45), 0 18px 26px -18px rgba(0, 0, 0, 0.7);
    --shadow-hero: 0 1px 0 rgba(0, 0, 0, 0.45), 0 34px 48px -30px rgba(0, 0, 0, 0.75);
    --shadow-slip: 0 16px 26px -18px rgba(0, 0, 0, 0.75);
    --shadow-token: 0 10px 16px -12px rgba(0, 0, 0, 0.8);
  }
}