@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/PlayfairDisplay-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SourceSerif4-It.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --font-ui-classic: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-ui-clear: "Source Serif 4", "Times New Roman", Georgia, serif;
  --font-prayer-classic: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-prayer-clear: "Source Serif 4", "Times New Roman", Georgia, serif;
  --font-ui: var(--font-ui-classic);
  --font-prayer: var(--font-prayer-classic);

  --color-parchment: #e9e2d4;
  --color-ivory: #faf6eb;
  --color-burgundy: #842735;
  --color-gold: #b49663;
  --color-text: #30271f;
  --color-muted: #675d50;
  --color-ribbon-olive: #657547;
  --color-ribbon-slate: #506b7a;
  --color-ribbon-plum: #75516c;
  --color-ribbon-gold: #a7802f;
  --color-ribbon-burgundy: #842735;

  --color-surface: var(--color-parchment);
  --color-raised: var(--color-ivory);
  --color-deep-raised: #f2e7d1;

  --color-accent: var(--color-burgundy);
  --color-rule: #ad9161;
  --color-rule-soft: #c7b284;
  --color-ornament: #9b783f;
  --color-active: #e9dcbf;
  --color-pattern: rgb(180 150 99 / 6%);
  --color-shadow: rgb(40 27 29 / 13%);
  --color-focus: #842735;

  --measure-prayer: 42rem;
  --sidebar-desktop: 17rem;
  --sidebar-tablet: 13rem;
  --reading-base: 18px;
  --reading-leading: 1.8;
  --reading-base-narrow: 17px;
  --reading-leading-narrow: 1.8;
}

[data-type="classicus"] {
  --font-ui: var(--font-ui-classic);
  --font-prayer: var(--font-prayer-classic);
}

[data-type="clarus"] {
  --font-ui: var(--font-ui-clear);
  --font-prayer: var(--font-prayer-clear);
}

[data-theme="clarum"] {
  color-scheme: light;
  --color-surface: var(--color-parchment);
  --color-raised: var(--color-ivory);
  --color-deep-raised: #f2e7d1;
  --color-text: #30271f;
  --color-muted: #675d50;
  --color-accent: var(--color-burgundy);
  --color-rule: #ad9161;
  --color-rule-soft: #c7b284;
  --color-ornament: #9b783f;
  --color-active: #e9dcbf;
  --color-pattern: rgb(180 150 99 / 6%);
  --color-shadow: rgb(40 27 29 / 13%);
  --color-focus: #842735;
}

[data-theme="obscurum"] {
  color-scheme: dark;
  --color-surface: #21191d;
  --color-raised: #2b2227;
  --color-deep-raised: #392b32;
  --color-text: #eee5d4;
  --color-muted: #c8b9ac;
  --color-accent: #d9bd78;
  --color-rule: #a68e64;
  --color-rule-soft: #65545b;
  --color-ornament: #d9bd78;
  --color-active: #48363e;
  --color-pattern: rgb(217 189 120 / 6%);
  --color-shadow: rgb(0 0 0 / 24%);
  --color-focus: #e6c982;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clarum"]):not([data-theme="obscurum"]) {
    color-scheme: dark;
    --color-surface: #21191d;
    --color-raised: #2b2227;
    --color-deep-raised: #392b32;
    --color-text: #eee5d4;
    --color-muted: #c8b9ac;
    --color-accent: #d9bd78;
    --color-rule: #a68e64;
    --color-rule-soft: #65545b;
    --color-ornament: #d9bd78;
    --color-active: #48363e;
    --color-pattern: rgb(217 189 120 / 6%);
    --color-shadow: rgb(0 0 0 / 24%);
    --color-focus: #e6c982;
  }
}