@font-face {
  font-family: Figtree;
  src: url("fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root, [data-theme="light"] {
  color-scheme: light;
  --cl-background: #F7F3EA;
  --cl-surface: #FFFFFF;
  --cl-text: #14272B;
  --cl-text-secondary: #4F6368;
  --cl-accent: #B23A22;
  --cl-on-accent: #FFFFFF;
  --cl-unlit: #3E7C80;
  --cl-lit: #FFE9C9;
  --cl-stripe: #D1583A;
  --cl-stone: #0F2A2E;
  --cl-lamp: #B23A22;
  --cl-mark: #0B2226;
  --cl-badge-text: #FFE9C9;
  --cl-solved: #FFF6E6;
  --cl-hint: #8FE3E8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cl-background: #0D1C1F;
    --cl-surface: #15292D;
    --cl-text: #F2EFE6;
    --cl-text-secondary: #A9BBBC;
    --cl-accent: #FF9A80;
    --cl-on-accent: #1A0C08;
    --cl-unlit: #37757A;
    --cl-lit: #FFE3BA;
    --cl-stripe: #D1583A;
    --cl-stone: #081416;
    --cl-lamp: #A8361F;
    --cl-mark: #081416;
    --cl-badge-text: #FFE3BA;
    --cl-solved: #FFF4E0;
    --cl-hint: #8FE3E8;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --cl-background: #0D1C1F;
  --cl-surface: #15292D;
  --cl-text: #F2EFE6;
  --cl-text-secondary: #A9BBBC;
  --cl-accent: #FF9A80;
  --cl-on-accent: #1A0C08;
  --cl-unlit: #37757A;
  --cl-lit: #FFE3BA;
  --cl-stripe: #D1583A;
  --cl-stone: #081416;
  --cl-lamp: #A8361F;
  --cl-mark: #081416;
  --cl-badge-text: #FFE3BA;
  --cl-solved: #FFF4E0;
  --cl-hint: #8FE3E8;
}

:root {
  --cl-type-display: 600 3rem/3.5rem Figtree, system-ui, sans-serif;
  --cl-type-headline: 600 1.75rem/2.25rem Figtree, system-ui, sans-serif;
  --cl-type-title: 600 1.25rem/1.75rem Figtree, system-ui, sans-serif;
  --cl-type-body: 400 1rem/1.5rem Figtree, system-ui, sans-serif;
  --cl-type-label: 600 0.875rem/1.25rem Figtree, system-ui, sans-serif;
  --cl-type-caption: 400 0.75rem/1rem Figtree, system-ui, sans-serif;
  --cl-type-numeric: 600 1.25rem/1.5rem Figtree, system-ui, sans-serif;
  --cl-type-badge: 700 0.75rem/1rem Figtree, system-ui, sans-serif;
}

.cl-display { font: var(--cl-type-display); font-variant-numeric: tabular-nums; }
.cl-headline { font: var(--cl-type-headline); }
.cl-title { font: var(--cl-type-title); }
.cl-body { font: var(--cl-type-body); }
.cl-label { font: var(--cl-type-label); }
.cl-caption { font: var(--cl-type-caption); }
.cl-numeric { font: var(--cl-type-numeric); font-variant-numeric: tabular-nums; }
.cl-badge { font: var(--cl-type-badge); font-variant-numeric: tabular-nums; font-size: min(0.75rem, calc(var(--cl-tile, 42px) * 0.3333)); }