:root {
  --font-heading: "Syne", sans-serif;
  --font-body: "Public Sans", sans-serif;
  --font-mono: "Space Mono", monospace;
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/uploads/fonts/syne/700-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/uploads/fonts/syne/800-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/uploads/fonts/public-sans/400-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/uploads/fonts/public-sans/900-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/uploads/fonts/space-mono/400-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/uploads/fonts/space-mono/700-latin-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg-page: hsla(0, 0%, 6.67%, 1);
  --bg-deep: hsla(240, 5.88%, 3.33%, 1);
  --bg-surface: hsla(0, 0%, 7.06%, 1);
  --bg-elevated: hsla(0, 0%, 8.24%, 1);
  --bg-card: hsla(0, 0%, 10.2%, 1);
  --bg-media: hsla(0, 0%, 10.2%, 1);
  --bg-selected: hsla(0, 0%, 20%, 1);
  --bg-accent: hsla(72, 100%, 50%, 1);
  --bg-accent-decorative: hsla(72, 100%, 50%, 1);
  --bg-inverse-surface: hsla(0, 0%, 96.08%, 1);
  --text-primary: hsla(0, 0%, 100%, 1);
  --text-secondary: hsla(0, 0%, 56.86%, 1);
  --text-tertiary: hsla(0, 0%, 53.33%, 1);
  --text-accent: hsla(72, 100%, 50%, 1);
  --text-success: hsla(144.9, 100%, 39.22%, 1);
  --text-on-accent: hsla(0, 0%, 0%, 1);
  --text-inverse-primary: hsla(0, 0%, 6.67%, 1);
  --text-inverse-secondary: hsla(0, 0%, 20%, 1);
  --text-inverse-tertiary: hsla(0, 0%, 37.65%, 1);
  --border-default: hsla(0, 0%, 37.65%, 1);
  --border-muted: hsla(0, 0%, 20%, 1);
  --border-input: hsla(0, 0%, 43.92%, 1);
  --border-accent: hsla(72, 100%, 50%, 1);
  --border-accent-warm: hsla(63.11, 100%, 49.22%, 1);
  --border-accent-decorative: hsla(72, 100%, 50%, 1);
  --border-on-accent: hsla(0, 0%, 0%, 1);
  --border-inverse-subtle: hsla(0, 0%, 87.84%, 1);
  --button-primary-text: hsla(0, 0%, 0%, 1);
  --button-secondary-bg: hsla(0, 0%, 7.06%, 1);
  --button-secondary-text: hsla(0, 0%, 100%, 1);
  --button-secondary-border: hsla(0, 0%, 37.65%, 1);
  --button-ghost-text: hsla(72, 100%, 50%, 1);
  --input-bg-disabled: hsla(0, 0%, 10.2%, 1);
  --nav-text-active: hsla(72, 100%, 50%, 1);
  --icon-info: hsla(206.82, 89.95%, 60.98%, 1);
  --icon-success: hsla(144.9, 100%, 39.22%, 1);
  --icon-on-accent: hsla(0, 0%, 0%, 1);
  --icon-tertiary: hsla(0, 0%, 29.8%, 1);
  --logo-primary: hsla(0, 0%, 100%, 1);
  --logo-secondary: hsla(0, 0%, 64.71%, 1);
  --logo-tertiary: hsla(0, 0%, 29.8%, 1);
  --black: hsla(0, 0%, 0%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --bg-accent-hover: hsla(73.82, 100%, 65.1%, 1);
  --bg-accent-pressed: hsla(72, 100%, 45.1%, 1);
  --text-accent-hover: hsla(73.82, 100%, 65.1%, 1);
  --border-strong: hsla(0, 0%, 56.86%, 1);
  --border-focus: hsla(72, 100%, 50%, 1);
  --button-primary-bg-hover: hsla(73.82, 100%, 65.1%, 1);
  --button-primary-bg-pressed: hsla(72, 100%, 45.1%, 1);
  --button-primary-border: hsla(72, 100%, 50%, 1);
  --button-secondary-bg-hover: hsla(0, 0%, 8.24%, 1);
  --button-secondary-bg-pressed: hsla(0, 0%, 10.2%, 1);
  --button-secondary-border-hover: hsla(0, 0%, 56.86%, 1);
  --button-ghost-bg-hover: hsla(0, 0%, 8.24%, 1);
  --button-ghost-bg-pressed: hsla(0, 0%, 10.2%, 1);
  --button-ghost-text-hover: hsla(73.82, 100%, 65.1%, 1);
  --nav-text-hover: hsla(0, 0%, 100%, 1);
  --font-size-12: clamp(0.75rem, calc(0vw + 0.75rem), 0.75rem);
  --font-size-13: clamp(0.81rem, calc(0vw + 0.81rem), 0.81rem);
  --spacing-0: clamp(0rem, calc(0vw + 0rem), 0rem);
  --spacing-6: clamp(0.38rem, calc(0vw + 0.38rem), 0.38rem);
  --spacing-8: clamp(0.5rem, calc(0vw + 0.5rem), 0.5rem);
  --spacing-10: clamp(0.63rem, calc(0vw + 0.63rem), 0.63rem);
  --spacing-12: clamp(0.75rem, calc(0vw + 0.75rem), 0.75rem);
  --spacing-16: clamp(1rem, calc(0vw + 1rem), 1rem);
  --spacing-20: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);
  --spacing-24: clamp(1.5rem, calc(0vw + 1.5rem), 1.5rem);
  --spacing-32: clamp(2rem, calc(0vw + 2rem), 2rem);
  --spacing-40: clamp(2.5rem, calc(0vw + 2.5rem), 2.5rem);
  --spacing-48: clamp(3rem, calc(0vw + 3rem), 3rem);
  --spacing-64: clamp(4rem, calc(0vw + 4rem), 4rem);
  --spacing-96: clamp(6rem, calc(0vw + 6rem), 6rem);
  --spacing-section-gap: clamp(2.5rem, calc(0vw + 2.5rem), 2.5rem);
  --spacing-button-gap: clamp(0.5rem, calc(0vw + 0.5rem), 0.5rem);
  --spacing-button-padding-x: clamp(1rem, calc(0vw + 1rem), 1rem);
  --spacing-input-padding-y: clamp(0.63rem, calc(0vw + 0.63rem), 0.63rem);
}

:root.theme-alt .theme-inverted,
:root.theme-alt .theme-always-default,
:root:not(.theme-alt) .theme-inverted .theme-always-default {
  --bg-page: hsla(0, 0%, 6.67%, 1);
  --bg-deep: hsla(240, 5.88%, 3.33%, 1);
  --bg-surface: hsla(0, 0%, 7.06%, 1);
  --bg-elevated: hsla(0, 0%, 8.24%, 1);
  --bg-card: hsla(0, 0%, 10.2%, 1);
  --bg-media: hsla(0, 0%, 10.2%, 1);
  --bg-selected: hsla(0, 0%, 20%, 1);
  --bg-accent: hsla(72, 100%, 50%, 1);
  --bg-accent-decorative: hsla(72, 100%, 50%, 1);
  --bg-inverse-surface: hsla(0, 0%, 96.08%, 1);
  --text-primary: hsla(0, 0%, 100%, 1);
  --text-secondary: hsla(0, 0%, 56.86%, 1);
  --text-tertiary: hsla(0, 0%, 53.33%, 1);
  --text-accent: hsla(72, 100%, 50%, 1);
  --text-success: hsla(144.9, 100%, 39.22%, 1);
  --text-on-accent: hsla(0, 0%, 0%, 1);
  --text-inverse-primary: hsla(0, 0%, 6.67%, 1);
  --text-inverse-secondary: hsla(0, 0%, 20%, 1);
  --text-inverse-tertiary: hsla(0, 0%, 37.65%, 1);
  --border-default: hsla(0, 0%, 37.65%, 1);
  --border-muted: hsla(0, 0%, 20%, 1);
  --border-input: hsla(0, 0%, 43.92%, 1);
  --border-accent: hsla(72, 100%, 50%, 1);
  --border-accent-warm: hsla(63.11, 100%, 49.22%, 1);
  --border-accent-decorative: hsla(72, 100%, 50%, 1);
  --border-on-accent: hsla(0, 0%, 0%, 1);
  --border-inverse-subtle: hsla(0, 0%, 87.84%, 1);
  --button-primary-text: hsla(0, 0%, 0%, 1);
  --button-secondary-bg: hsla(0, 0%, 7.06%, 1);
  --button-secondary-text: hsla(0, 0%, 100%, 1);
  --button-secondary-border: hsla(0, 0%, 37.65%, 1);
  --button-ghost-text: hsla(72, 100%, 50%, 1);
  --input-bg-disabled: hsla(0, 0%, 10.2%, 1);
  --nav-text-active: hsla(72, 100%, 50%, 1);
  --icon-info: hsla(206.82, 89.95%, 60.98%, 1);
  --icon-success: hsla(144.9, 100%, 39.22%, 1);
  --icon-on-accent: hsla(0, 0%, 0%, 1);
  --icon-tertiary: hsla(0, 0%, 29.8%, 1);
  --logo-primary: hsla(0, 0%, 100%, 1);
  --logo-secondary: hsla(0, 0%, 64.71%, 1);
  --logo-tertiary: hsla(0, 0%, 29.8%, 1);
  --black: hsla(0, 0%, 0%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --bg-accent-hover: hsla(73.82, 100%, 65.1%, 1);
  --bg-accent-pressed: hsla(72, 100%, 45.1%, 1);
  --text-accent-hover: hsla(73.82, 100%, 65.1%, 1);
  --border-strong: hsla(0, 0%, 56.86%, 1);
  --border-focus: hsla(72, 100%, 50%, 1);
  --button-primary-bg-hover: hsla(73.82, 100%, 65.1%, 1);
  --button-primary-bg-pressed: hsla(72, 100%, 45.1%, 1);
  --button-primary-border: hsla(72, 100%, 50%, 1);
  --button-secondary-bg-hover: hsla(0, 0%, 8.24%, 1);
  --button-secondary-bg-pressed: hsla(0, 0%, 10.2%, 1);
  --button-secondary-border-hover: hsla(0, 0%, 56.86%, 1);
  --button-ghost-bg-hover: hsla(0, 0%, 8.24%, 1);
  --button-ghost-bg-pressed: hsla(0, 0%, 10.2%, 1);
  --button-ghost-text-hover: hsla(73.82, 100%, 65.1%, 1);
  --nav-text-hover: hsla(0, 0%, 100%, 1);
}

:root.theme-alt,
:root:not(.theme-alt) .theme-inverted,
:root:not(.theme-alt) .theme-always-alt,
:root.theme-alt .theme-inverted .theme-always-alt {
  --bg-page: hsla(0, 0%, 96.08%, 1);
  --bg-deep: hsla(0, 0%, 87.84%, 1);
  --bg-surface: hsla(0, 0%, 100%, 1);
  --bg-elevated: hsla(0, 0%, 100%, 1);
  --bg-card: hsla(0, 0%, 100%, 1);
  --bg-media: hsla(0, 0%, 87.84%, 1);
  --bg-selected: hsla(73.7, 100%, 75.1%, 1);
  --bg-accent-decorative: hsla(73.7, 100%, 75.1%, 1);
  --bg-inverse-surface: hsla(0, 0%, 6.67%, 1);
  --text-primary: hsla(0, 0%, 6.67%, 1);
  --text-secondary: hsla(0, 0%, 29.8%, 1);
  --text-tertiary: hsla(0, 0%, 37.65%, 1);
  --text-accent: hsla(72.86, 100%, 19.22%, 1);
  --text-success: hsla(137.94, 100%, 20.98%, 1);
  --text-inverse-primary: hsla(0, 0%, 100%, 1);
  --text-inverse-secondary: hsla(0, 0%, 56.86%, 1);
  --text-inverse-tertiary: hsla(0, 0%, 53.33%, 1);
  --border-default: hsla(0, 0%, 52.16%, 1);
  --border-muted: hsla(0, 0%, 87.84%, 1);
  --border-input: hsla(0, 0%, 46.27%, 1);
  --border-accent: hsla(72.86, 100%, 19.22%, 1);
  --border-accent-warm: hsla(72.86, 100%, 19.22%, 1);
  --border-accent-decorative: hsla(73.82, 100%, 65.1%, 1);
  --border-inverse-subtle: hsla(0, 0%, 20%, 1);
  --button-secondary-bg: hsla(0, 0%, 100%, 1);
  --button-secondary-text: hsla(0, 0%, 6.67%, 1);
  --button-secondary-border: hsla(0, 0%, 52.16%, 1);
  --button-ghost-text: hsla(72.86, 100%, 19.22%, 1);
  --input-bg-disabled: hsla(0, 0%, 100%, 1);
  --nav-text-active: hsla(72.86, 100%, 19.22%, 1);
  --icon-info: hsla(209.12, 94.44%, 28.24%, 1);
  --icon-success: hsla(137.94, 100%, 20.98%, 1);
  --icon-tertiary: hsla(0, 0%, 37.65%, 1);
  --logo-primary: hsla(0, 0%, 6.67%, 1);
  --logo-secondary: hsla(0, 0%, 37.65%, 1);
  --logo-tertiary: hsla(225, 3.03%, 74.12%, 1);
  --text-accent-hover: hsla(73.5, 100%, 15.69%, 1);
  --border-strong: hsla(0, 0%, 37.65%, 1);
  --border-focus: hsla(73.5, 100%, 15.69%, 1);
  --button-primary-border: hsla(72.86, 100%, 19.22%, 1);
  --button-secondary-bg-hover: hsla(0, 0%, 100%, 1);
  --button-secondary-bg-pressed: hsla(0, 0%, 100%, 1);
  --button-secondary-border-hover: hsla(0, 0%, 37.65%, 1);
  --button-ghost-bg-hover: hsla(0, 0%, 100%, 1);
  --button-ghost-bg-pressed: hsla(0, 0%, 100%, 1);
  --button-ghost-text-hover: hsla(73.5, 100%, 15.69%, 1);
  --nav-text-hover: hsla(0, 0%, 6.67%, 1);
}