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

:root {
  /* colors — change these per client */
  --bg:      #ffffff;
  --fg:      #111111;
  --muted:   #808080;
  --border:  #bbbbbb;
  --accent:  #0000cd;

  /* type scale */
  --font:    "under", sans-serif;
  --weight:  250;
}

/* svg text baseline */
text { white-space: pre; }

/* type scale — all inherit --fg by default */
.display,
.h1, .h2, .h3, .h4,
.body, .caption { font-family: var(--font); font-weight: var(--weight); fill: var(--fg); }

.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; }

/* color utilities */
.fg      { fill: var(--fg);     }
.muted   { fill: var(--muted);  }
.accent  { fill: var(--accent); }
.bg-fill { fill: var(--bg);     }
.fg-fill { fill: var(--fg);     }

/* stroke */
.border-stroke { stroke: var(--border); }
.stroke-fg     { stroke: var(--fg);     }

/* opacity */
.dim     { opacity: 0.4; }