/* Textured surroundings; working surfaces stay opaque and untextured. */
:root {
  --r: 8px;
}

html:not([data-theme="dark"]) {
  --bg: #f6f8fb;
  --subtle: #f0f4f9;
  --ink: #1c304b;
  --muted: #52657d;
  --line: #d5dfeb;
  --brand: #245cad;
  --brand-soft: #eaf1fa;
}

html:not([data-theme="dark"]) body {
  background-image: url("paper-grain.png"), url("paper-wash.png");
  background-repeat: repeat, no-repeat;
  background-size: 512px 512px, 100% 100vh;
  background-attachment: scroll, fixed;
}

html:not([data-theme="dark"]) .header {
  background-color: #fbfcfe;
  background-image: url("paper-grain.png");
}

.brandmark {
  background: #245cad;
  border-radius: 5px;
}

.button.primary {
  background: #245cad;
  border-color: #245cad;
}

.button.primary:hover {
  background: #1b4c94;
  border-color: #1b4c94;
}

.button,
.icon-button,
.workspace-nav a,
.header nav a,
.language-menu > summary {
  border-radius: 5px;
}

.source-box {
  border-start-end-radius: var(--r);
  border-end-end-radius: var(--r);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

@media (max-width: 820px) {
  .source-box {
    border-radius: 0 0 var(--r) var(--r);
  }
}

@media (forced-colors: active) {
  html:not([data-theme="dark"]) body,
  html:not([data-theme="dark"]) .header {
    background-image: none;
  }
}

@media print {
  html:not([data-theme="dark"]) body {
    background: #fff;
  }
}