@font-face {
  font-family: 'Onest';
  src: url('Onest.ttf') format('truetype');
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-bg: #f2f0eb;
  --color-surface: rgba(255, 255, 255, 0.64);
  --color-text: #151515;
  --color-text-soft: #4b4a46;
  --color-muted: #7a766f;
  --color-border: rgba(21, 21, 21, 0.12);
  --color-glow: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #11110f;
    --color-surface: rgba(255, 255, 255, 0.06);
    --color-text: #f1eee7;
    --color-text-soft: #c6c0b6;
    --color-muted: #8f887c;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-glow: rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme='light'] {
  color-scheme: light;

  --color-bg: #f2f0eb;
  --color-surface: rgba(255, 255, 255, 0.64);
  --color-text: #151515;
  --color-text-soft: #4b4a46;
  --color-muted: #7a766f;
  --color-border: rgba(21, 21, 21, 0.12);
  --color-glow: rgba(255, 255, 255, 0.9);
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #11110f;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-text: #f1eee7;
  --color-text-soft: #c6c0b6;
  --color-muted: #8f887c;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-glow: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color: var(--color-text);
  background: var(--color-bg);
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  font-family: 'Onest', sans-serif;
  line-height: 1.5;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6, p, span {
  margin-left: -0.07em;
}