/* Fonts (self-hosted, latin subset) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}

/* Colour themes. Prism is the default; all palettes are bright. */
:root,
html[data-colour-theme="prism"] {
  --fb-page: #f7f8ff;
  --fb-ink: #202a47;
  --fb-muted: #525d78;
  --fb-surface: #ffffff;
  --fb-line: #e0e4f0;
  --fb-primary: #6142db;
  --fb-primary-end: #3b68cd;
  --fb-on-primary: #ffffff;
  --fb-reflect-a: #9258f8;
  --fb-reflect-b: #22c4de;
  --fb-reflect-c: #ffafbc;
  --fb-tint-a: #e5dbff;
  --fb-tint-b: #ccf4fa;
  --fb-tint-c: #ffe2e9;
  --fb-shadow: rgba(78, 64, 148, 0.12);
}

html[data-colour-theme="lagoon"] {
  --fb-page: #f4fbfd;
  --fb-primary: #0a6e83;
  --fb-primary-end: #275ecc;
  --fb-reflect-a: #2c94f5;
  --fb-reflect-b: #25d6b6;
  --fb-reflect-c: #b9d966;
  --fb-tint-a: #d9ebff;
  --fb-tint-b: #cefaef;
  --fb-tint-c: #eff6cf;
  --fb-shadow: rgba(27, 103, 139, 0.12);
}

html[data-colour-theme="sunrise"] {
  --fb-page: #fffaf8;
  --fb-primary: #c24351;
  --fb-primary-end: #b85a22;
  --fb-reflect-a: #fb7286;
  --fb-reflect-b: #ffa855;
  --fb-reflect-c: #bd9bf8;
  --fb-tint-a: #ffe1e9;
  --fb-tint-b: #ffecd5;
  --fb-tint-c: #ebdeff;
  --fb-shadow: rgba(160, 76, 95, 0.12);
}

:root {
  --fb-font-display: "Manrope", Arial, sans-serif;
  --fb-font-body: "DM Sans", Arial, sans-serif;
  --fb-glass-opacity: 0.82;
  --fb-glass-blur: 20px;
  --fb-radius: 28px;
  --fb-radius-sm: 18px;
  --fb-gutter: 20px;
  --fb-section-gap: 48px;
  --fb-header-offset: 80px;
  --fb-focus: 0 0 0 3px var(--fb-page), 0 0 0 5px var(--fb-primary);
}

@media (max-width: 374.98px) {
  :root {
    --fb-header-offset: 124px;
  }
}

@media (min-width: 768px) {
  :root {
    --fb-gutter: 30px;
    --fb-section-gap: 72px;
    --fb-header-offset: 96px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fb-gutter: 42px;
    --fb-section-gap: 96px;
  }
}