@font-face {
  font-family: 'under';
  src: url('under.woff2') format('woff2'), url('under.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'garamond';
  src: url('garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'garamond';
  src: url('garamond-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --blue:   #0000CD;
  --purple: #800080;
  --violet: #EE82EE;
  --red:    #FF4500;
  --orange: #FFA500;
  --gold:   #FFD700;
  --green:  #006400;
  --select: #0D99FF;

  --ink:   #111111;
  --paper: #ffffff;
  --muted: #808080;
  --line:  #bbbbbb;

  --font:  "under", sans-serif;
  --title: "garamond", serif;
  --weight:       250;
  --title-weight: 500;
}

html, [data-theme="light"] {
  --color-accent-primary:   var(--blue);
  --color-accent-secondary: var(--purple);
  --color-positive:         var(--green);
  --color-warning:          var(--orange);
  --color-negative:         var(--red);
}

.display, .h1, .h2, .h3, .h4, .body, .caption {
  font-family: var(--font);
  font-weight: var(--weight);
  fill: var(--ink);
}

.display, .h1, .h2, .h3, .h4 {
  font-family: var(--title);
  font-weight: var(--title-weight);
}

.display { font-size: 144px; }
.h1      { font-size:  64px; }
.h2      { font-size:  48px; }
.h3      { font-size:  32px; }
.h4      { font-size:  24px; }
.body    { font-size:  20px; }
.caption { font-size:  14px; }

.fg      { fill: var(--ink); }
.muted   { fill: var(--muted); }
.accent  { fill: var(--blue); }
.bg-fill { fill: var(--paper); }

.border-stroke { stroke: var(--line); }
.stroke-fg     { stroke: var(--ink); }

.dim { opacity: 0.4; }