@font-face {
  font-family: "Altroned Trial";
  src: url("/assets/fonts/altroned_trial.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fff;
  --fg: hsl(220 26% 14%);
  --surface: hsl(210 20% 98%);
  --muted: hsl(220 14% 96%);
  --muted-fg: hsl(220 9% 46%);
  --border: hsl(220 13% 91%);
  --primary: hsl(281 100% 35%);
  --primary-dark: hsl(281 100% 22%);
  --primary-light: hsl(281 100% 96%);
  --accent: hsl(263 84% 58%);
  --danger: hsl(0 84% 60%);
  --ok: hsl(142 71% 45%);
  --warn-bg: #fffbeb;
  --warn-fg: #b45309;
  --warn-line: #f59e0b;
  --dark: hsl(256 22% 14%);
  --dark-fg: #fff;

  --grad: linear-gradient(135deg, hsl(281 100% 35%), hsl(281 100% 22%));
  --grad-text: linear-gradient(135deg, hsl(281 100% 35%), hsl(281 60% 55%));
  --grad-cta: linear-gradient(135deg, hsl(263 84% 58%), hsl(263 69% 42%));
  --shadow: 0 10px 40px hsl(263 84% 58% / .08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-word: "Altroned Trial", var(--font-head);

  --r-sm: .5rem;
  --r: .75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;

  --wrap: 1280px;
  --gutter: 20px;
  --banner-h: 40px;
  --nav-h: 64px;
  --top-h: calc(var(--banner-h) + var(--nav-h));
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 768px) { :root { --gutter: 48px; --banner-h: 48px; --nav-h: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; } }

.no-banner { --banner-h: 0px; }