kitchen-sink-server/public/theme.css

@font-face {
  font-family: 'mononoki';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local('mononoki'),
    url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local('mononoki Bold'),
    local('mononoki'),
    url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src:
    local('mononoki Italic'),
    local('mononoki'),
    url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src:
    local('mononoki Bold Italic'),
    local('mononoki BoldItalic'),
    local('mononoki'),
    url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
}

:root {
  --font-family-base: 'Encode Sans', system-ui;
  --font-stretch-base: semi-expanded;
  --font-weight-base: 400;
  --line-height-base: 1.5em;
  --font-family-headings: Glory, 'Encode Sans', system-ui;
  --font-stretch-headings: condensed;
  --font-weight-headings: 100;
  --line-height-headings: 1.125em;
  --font-family-monospace: 'mononoki';
  --font-size-root: 16px;
  --opacity-light: 0.25;
  --opacity-lighter: 0.5;
  --opacity-lightest: 0.75;
}

:root {
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);
  --color-accent: var(--color-primary, blue);
  --color-active: var(--color-tertiary, red);
  --color-hover: var(--color-secondary, blue);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-negative, black);
    --color-fg: var(--color-positive, white);
  }
}

:root {
  font-size: var(--font-size-root);
  font-family: var(--font-family-base), sans-serif;
  font-stretch: var(--font-stretch-base, normal);
  font-weight: var(--font-weight-base, 400);
  line-height: var(--line-height-base, 1.5);
  transition-property: color, background-color;
  transition-timing-function: ease;
  transition-duration: 350ms;
}

@media only screen {
  :root {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
}

title {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

meta[name="display-title"] {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h1 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h2 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: calc(var(--font-weight-headings, 400) / 100 * 150);
  line-height: var(--line-height-headings, 1.5);
}

h3 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: calc(var(--font-weight-headings, 400) / 100 * 250);
  line-height: var(--line-height-headings, 1.5);
}

h4 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h5 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h6 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

code {
  font-family: var(--font-family-monospace), monospace;
}

pre {
  font-family: var(--font-family-monospace), monospace;
}

a {
  color: inherit;
  text-decoration: none;
}

@media only screen {
  a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  a:focus {
    color: var(--color-active);
  }
}

::selection {
  background-color: var(--color-active);
  color: var(--color-fg);
}

:root {
  caret-color: var(--color-active);
}