/* AUTO-GENERATED @font-face rules from Admin > Fonts. */
@font-face {
  font-family: 'Montserrat';
  src: url('/media/fonts/montserrat-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/media/fonts/montserrat-italic-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'RedHatText';
  src: url('/media/fonts/redhattext-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RedHatText';
  src: url('/media/fonts/redhattext-italic-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'RedHatMono';
  src: url('/media/fonts/redhatmono-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RedHatMono';
  src: url('/media/fonts/redhatmono-italic-variablefont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* AUTO-GENERATED from theme tokens — edit in Admin > Branding. */
:root {
  --color-brand: #930df2;
  --color-brand-light: #ae4bf6;
  --color-brand-dark: #6c0ab4;
  --color-brand-soft: #f5ebfe;
  --color-accent: #4e8a56;
  --color-accent-light: #6fb077;
  --color-accent-dark: #3e6b43;
  --color-accent-soft: #e6f2e7;
  --color-slate: #555272;
  --color-slate-soft: #ecebf2;
  --color-bg: #ffffff;
  --color-surface: #f5f5f7;
  --color-surface-dark: #e2e2e7;
  --color-ink: #1b1b1f;
  --color-muted: #63636b;
  --color-highlight-teal: #42dada;
  --color-highlight-pink: #e154e3;
  --font-sans: 'RedHatText', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'RedHatMono', ui-monospace, SFMono-Regular, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --size-container: 1100px;
  --weight-heading: 400;
}
[data-theme="dark"] {
  --color-brand: #b573f7;
  --color-brand-light: #c896fa;
  --color-brand-dark: #8e2be8;
  --color-brand-soft: #2b1943;
  --color-accent: #6fb077;
  --color-accent-light: #8cc793;
  --color-accent-dark: #57955f;
  --color-accent-soft: #1c2a1e;
  --color-slate: #8e8bad;
  --color-slate-soft: #26243a;
  --color-bg: #141417;
  --color-surface: #1e1e23;
  --color-surface-dark: #2c2c33;
  --color-ink: #ededf2;
  --color-muted: #9c9ca7;
  --color-highlight-teal: #2a8f8f;
  --color-highlight-pink: #dc60e0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #b573f7;
    --color-brand-light: #c896fa;
    --color-brand-dark: #8e2be8;
    --color-brand-soft: #2b1943;
    --color-accent: #6fb077;
    --color-accent-light: #8cc793;
    --color-accent-dark: #57955f;
    --color-accent-soft: #1c2a1e;
    --color-slate: #8e8bad;
    --color-slate-soft: #26243a;
    --color-bg: #141417;
    --color-surface: #1e1e23;
    --color-surface-dark: #2c2c33;
    --color-ink: #ededf2;
    --color-muted: #9c9ca7;
    --color-highlight-teal: #2a8f8f;
    --color-highlight-pink: #dc60e0;
  }
}

/* AUTO-GENERATED from the palette designer — edit in Admin > Palette. */
.surface-default {
  --c-bg: var(--color-bg);
  --c-text: var(--color-ink);
  --c-heading: var(--color-ink);
  --c-subtle: var(--color-muted);
  --c-feature: var(--color-brand);
  --c-link: var(--color-brand);
  --c-panel: var(--color-surface);
  --c-panel-border: var(--color-surface-dark);
  --c-hairline: var(--color-surface-dark);
  --c-btn-bg: var(--color-brand);
  --c-btn: var(--color-bg);
  --c-tab-bg: var(--color-brand-soft);
  --c-tab: var(--color-brand-dark);
}

.surface-muted {
  --c-bg: var(--color-surface);
  --c-text: var(--color-ink);
  --c-heading: var(--color-ink);
  --c-subtle: var(--color-muted);
  --c-feature: var(--color-brand);
  --c-link: var(--color-brand);
  --c-panel: var(--color-bg);
  --c-panel-border: var(--color-surface-dark);
  --c-hairline: var(--color-surface-dark);
  --c-btn-bg: var(--color-brand);
  --c-btn: var(--color-bg);
  --c-tab-bg: var(--color-brand-soft);
  --c-tab: var(--color-brand-dark);
}

.surface-soft {
  --c-bg: var(--color-brand-soft);
  --c-text: var(--color-ink);
  --c-heading: var(--color-brand-dark);
  --c-subtle: var(--color-muted);
  --c-feature: var(--color-brand);
  --c-link: var(--color-brand-dark);
  --c-panel: var(--color-bg);
  --c-panel-border: var(--color-surface-dark);
  --c-hairline: var(--color-surface-dark);
  --c-btn-bg: var(--color-brand);
  --c-btn: var(--color-bg);
  --c-tab-bg: var(--color-bg);
  --c-tab: var(--color-brand-dark);
}

.surface-green {
  --c-bg: var(--color-accent-soft);
  --c-text: var(--color-ink);
  --c-heading: var(--color-accent-dark);
  --c-subtle: var(--color-muted);
  --c-feature: var(--color-accent-dark);
  --c-link: var(--color-accent-dark);
  --c-panel: var(--color-bg);
  --c-panel-border: var(--color-surface-dark);
  --c-hairline: var(--color-surface-dark);
  --c-btn-bg: var(--color-accent-dark);
  --c-btn: var(--color-bg);
  --c-tab-bg: var(--color-bg);
  --c-tab: var(--color-accent-dark);
}

.surface-brand {
  --c-bg: var(--color-brand-dark);
  --c-text: var(--color-brand-soft);
  --c-heading: var(--color-bg);
  --c-subtle: var(--color-slate-soft);
  --c-feature: var(--color-accent-light);
  --c-link: var(--color-highlight-pink);
  --c-panel: var(--color-brand);
  --c-panel-border: var(--color-brand-light);
  --c-hairline: var(--color-brand-light);
  --c-btn-bg: var(--color-accent-light);
  --c-btn: var(--color-ink);
  --c-tab-bg: var(--color-brand-soft);
  --c-tab: var(--color-brand-dark);
}

.surface-dark {
  --c-bg: var(--color-ink);
  --c-text: var(--color-surface);
  --c-heading: var(--color-bg);
  --c-subtle: var(--color-slate-soft);
  --c-feature: var(--color-brand-light);
  --c-link: var(--color-brand-light);
  --c-panel: var(--color-slate);
  --c-panel-border: var(--color-slate-soft);
  --c-hairline: var(--color-slate);
  --c-btn-bg: var(--color-brand-light);
  --c-btn: var(--color-ink);
  --c-tab-bg: var(--color-slate-soft);
  --c-tab: var(--color-ink);
}