/*
 * Defining the base layout, typography, and CSS variables for theming.
 */
html {
  --sticky-body-background: #fff8d6; /* Canary as the default */
  --sticky-body-font-family: ui-sans-serif, system-ui, "Noto Sans", "DejaVu Sans";
  --sticky-body-foreground: #222;
  --blockquote-border: #ccc;
}

html, body, #root, #content {
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  outline: none !important;
  padding: 0;
}

body {
  background-color: var(--sticky-body-background);
  color: var(---sticky-body-foreground);
  font-family: var(--sticky-body-font-family);
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 10px;
}

html.click-through #content {
  pointer-events: none;
  user-select: none;
}

blockquote {
  margin: .4em 0;
  padding-left: .7em;
  border-left: 4px solid var(--blockquote-border);
}

.callout {
  padding: .6em .8em;
  border-radius: 10px;
  margin: .45em 0;
  background-color: rgba(0,0,0,0.05);
}

/*
 * Defining the theme variations by re-assigning the CSS variables.
 */
html.theme-canary {
  --sticky-body-background: #fff8d6;
  --sticky-body-foreground: #222;
  --blockquote-border: #ccc;
}

html.theme-graphite {
  --sticky-body-background: #2b2b2b;
  --sticky-body-foreground: #e8e8e8;
  --blockquote-border: #555;
}

html.theme-parchment {
  --sticky-body-background: #efe5d0;
  --sticky-body-foreground: #2a2a2a;
  --blockquote-border: #bcae96;
}