@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0');




/* Import theme variables */
/* Built using https://m3.material.io/theme-builder */
/* https://material-foundation.github.io/material-theme-builder/?primary=%23771AA9&secondary=%232C1043&tertiary=%23B1AEBB&neutral=%23E9E6F2&neutralVariant=%23FBFCFE&custom%3ASuccess=%238BC34A&custom%3AError=%23D83A3A&custom%3AWarning=%23FF6D00&custom%3AInfo=%230288D2&bodyFont=Public+Sans&displayFont=Poppins&colorMatch=true */
:root {
  /* Admin-aligned tokens (shadcn compatibility) */
  --blok-primary: hsl(279, 61%, 32%);
  --blok-secondary: hsl(275, 32%, 93%);
  --blok-border: hsl(275, 20%, 88%);
  --blok-brand-accent: hsl(36, 89%, 49%);
  --blok-overlay: rgba(255, 255, 255, 0.25);

  /* Border radius tokens */
  --radius: 0.75rem;
  --radius-lg: 0.75rem;
  --radius-md: calc(0.75rem - 2px);
  --radius-sm: calc(0.75rem - 4px);

  /* Light theme colors */
  --md-sys-color-primary: hsl(279, 61%, 32%);
  --md-sys-color-surface-tint: rgb(138 50 187);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(119 26 169);
  --md-sys-color-on-primary-container: rgb(153 121 178);
  --md-sys-color-secondary: rgb(12 0 26);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(44 16 67);
  --md-sys-color-on-secondary-container: rgb(226 170 255);
  --md-sys-color-tertiary: rgb(95 93 104);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(177 174 187);
  --md-sys-color-on-tertiary-container: rgb(67 66 76);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(255 247 252);
  --md-sys-color-on-background: rgb(31 25 34);
  --md-sys-color-surface: rgb(252 248 249);
  --md-sys-color-on-surface: rgb(28 27 28);
  --md-sys-color-surface-variant: rgb(225 227 229);
  --md-sys-color-on-surface-variant: rgb(68 71 73);
  --md-sys-color-outline: rgb(116 119 122);
  --md-sys-color-outline-variant: rgb(196 199 201);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(49 48 49);
  --md-sys-color-inverse-on-surface: rgb(244 240 240);
  --md-sys-color-inverse-primary: rgb(230 180 255);
  --md-sys-color-primary-fixed: rgb(245 217 255);
  --md-sys-color-on-primary-fixed: rgb(48 0 74);
  --md-sys-color-primary-fixed-dim: rgb(230 180 255);
  --md-sys-color-on-primary-fixed-variant: rgb(111 11 161);
  --md-sys-color-secondary-fixed: rgb(241 218 255);
  --md-sys-color-on-secondary-fixed: rgb(41 13 64);
  --md-sys-color-secondary-fixed-dim: rgb(221 185 247);
  --md-sys-color-on-secondary-fixed-variant: rgb(87 58 111);
  --md-sys-color-tertiary-fixed: rgb(228 224 238);
  --md-sys-color-on-tertiary-fixed: rgb(27 27 36);
  --md-sys-color-tertiary-fixed-dim: rgb(200 197 210);
  --md-sys-color-on-tertiary-fixed-variant: rgb(71 70 80);
  --md-sys-color-surface-dim: rgb(221 217 218);
  --md-sys-color-surface-bright: rgb(252 248 249);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(247 243 243);
  --md-sys-color-surface-container: rgb(241 237 237);
  --md-sys-color-surface-container-high: rgb(235 231 232);
  --md-sys-color-surface-container-highest: rgb(229 225 226);
  --md-extended-color-success-color: rgb(62 106 0);
  --md-extended-color-success-on-color: rgb(255 255 255);
  --md-extended-color-success-color-container: rgb(139 195 74);
  --md-extended-color-success-on-color-container: rgb(45 78 0);
  --md-extended-color-error-color: rgb(181 31 37);
  --md-extended-color-error-on-color: rgb(255 255 255);
  --md-extended-color-error-color-container: rgb(216 58 58);
  --md-extended-color-error-on-color-container: rgb(255 254 255);
  --md-extended-color-warning-color: rgb(159 66 0);
  --md-extended-color-warning-on-color: rgb(255 255 255);
  --md-extended-color-warning-color-container: rgb(255 109 0);
  --md-extended-color-warning-on-color-container: rgb(88 33 0);
  --md-extended-color-info-color: rgb(0 96 151);
  --md-extended-color-info-on-color: rgb(255 255 255);
  --md-extended-color-info-color-container: rgb(0 122 189);
  --md-extended-color-info-on-color-container: rgb(253 252 255);
}
[data-theme='dark'] {
  /* Admin-aligned dark tokens (matching shadcn globals.css .dark) */
  --blok-primary: hsl(279, 73%, 38%);
  --blok-secondary: hsl(277, 55%, 15%);
  --blok-border: hsl(277, 35%, 24%);
  --blok-muted: hsl(277, 40%, 12%);
  --blok-muted-foreground: hsl(275, 15%, 60%);
  --blok-overlay: rgba(0, 0, 0, 0.5);

  /* Dark theme colors - purple-tinted to match admin */
  --md-sys-color-primary: hsl(279, 73%, 38%);
  --md-sys-color-surface-tint: hsl(279, 73%, 55%);
  --md-sys-color-on-primary: hsl(0, 0%, 100%);
  --md-sys-color-primary-container: hsl(277, 55%, 15%);
  --md-sys-color-on-primary-container: hsl(275, 20%, 95%);
  --md-sys-color-secondary: hsl(277, 55%, 15%);
  --md-sys-color-on-secondary: hsl(275, 20%, 95%);
  --md-sys-color-secondary-container: hsl(277, 50%, 10%);
  --md-sys-color-on-secondary-container: hsl(275, 20%, 90%);
  --md-sys-color-tertiary: hsl(275, 15%, 60%);
  --md-sys-color-on-tertiary: hsl(277, 25%, 2%);
  --md-sys-color-tertiary-container: hsl(277, 40%, 12%);
  --md-sys-color-on-tertiary-container: hsl(275, 20%, 90%);
  --md-sys-color-error: hsl(0, 84%, 60%);
  --md-sys-color-on-error: hsl(0, 0%, 100%);
  --md-sys-color-error-container: hsl(0, 70%, 20%);
  --md-sys-color-on-error-container: hsl(0, 84%, 80%);
  --md-sys-color-background: hsl(277, 25%, 2%);
  --md-sys-color-on-background: hsl(275, 20%, 95%);
  --md-sys-color-surface: hsl(277, 50%, 5%);
  --md-sys-color-on-surface: hsl(275, 20%, 95%);
  --md-sys-color-surface-variant: hsl(277, 35%, 24%);
  --md-sys-color-on-surface-variant: hsl(275, 15%, 60%);
  --md-sys-color-outline: hsl(277, 20%, 40%);
  --md-sys-color-outline-variant: hsl(277, 35%, 24%);
  --md-sys-color-shadow: hsl(0, 0%, 0%);
  --md-sys-color-scrim: hsl(0, 0%, 0%);
  --md-sys-color-inverse-surface: hsl(275, 20%, 95%);
  --md-sys-color-inverse-on-surface: hsl(277, 50%, 5%);
  --md-sys-color-inverse-primary: hsl(279, 61%, 32%);
  --md-sys-color-primary-fixed: hsl(279, 60%, 85%);
  --md-sys-color-on-primary-fixed: hsl(279, 61%, 16%);
  --md-sys-color-primary-fixed-dim: hsl(279, 73%, 70%);
  --md-sys-color-on-primary-fixed-variant: hsl(279, 73%, 38%);
  --md-sys-color-secondary-fixed: hsl(275, 40%, 85%);
  --md-sys-color-on-secondary-fixed: hsl(277, 55%, 10%);
  --md-sys-color-secondary-fixed-dim: hsl(275, 30%, 70%);
  --md-sys-color-on-secondary-fixed-variant: hsl(277, 55%, 15%);
  --md-sys-color-tertiary-fixed: hsl(275, 25%, 85%);
  --md-sys-color-on-tertiary-fixed: hsl(277, 40%, 8%);
  --md-sys-color-tertiary-fixed-dim: hsl(275, 20%, 70%);
  --md-sys-color-on-tertiary-fixed-variant: hsl(277, 40%, 12%);
  --md-sys-color-surface-dim: hsl(277, 25%, 2%);
  --md-sys-color-surface-bright: hsl(277, 40%, 18%);
  --md-sys-color-surface-container-lowest: hsl(277, 30%, 3%);
  --md-sys-color-surface-container-low: hsl(277, 45%, 6%);
  --md-sys-color-surface-container: hsl(277, 40%, 10%);
  --md-sys-color-surface-container-high: hsl(277, 38%, 14%);
  --md-sys-color-surface-container-highest: hsl(277, 35%, 18%);
  --md-extended-color-success-color: hsl(84, 55%, 63%);
  --md-extended-color-success-on-color: hsl(84, 100%, 10%);
  --md-extended-color-success-color-container: hsl(84, 45%, 53%);
  --md-extended-color-success-on-color-container: hsl(84, 100%, 15%);
  --md-extended-color-error-color: hsl(4, 100%, 84%);
  --md-extended-color-error-on-color: hsl(0, 100%, 20%);
  --md-extended-color-error-color-container: hsl(0, 70%, 45%);
  --md-extended-color-error-on-color-container: hsl(0, 100%, 95%);
  --md-extended-color-warning-color: hsl(24, 100%, 79%);
  --md-extended-color-warning-on-color: hsl(24, 100%, 17%);
  --md-extended-color-warning-color-container: hsl(26, 100%, 50%);
  --md-extended-color-warning-on-color-container: hsl(24, 100%, 17%);
  --md-extended-color-info-color: hsl(207, 100%, 79%);
  --md-extended-color-info-on-color: hsl(207, 100%, 16%);
  --md-extended-color-info-color-container: hsl(200, 75%, 53%);
  --md-extended-color-info-on-color-container: hsl(207, 100%, 9%);
}
/* Import Poppins for headings */
/* Import Public Sans for body text */
/* Import Roboto for material fall-back so we don't end up with Times New Roman shit on iOS */
/* Import Material Symbols for icons */
/* Font variables */
:root {
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes */
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
}
/* Base typography styles */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
  margin-top: 0;
}
h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-large);
}
h6 {
  font-size: var(--font-size-base);
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Responsive typography */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }
}
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: var(--font-body, 'Public Sans', system-ui, sans-serif);
  background:
    radial-gradient(at 0% 100%, hsla(279, 60%, 75%, 0.5) 0%, transparent 50%),
    radial-gradient(at 100% 0%, hsla(225, 50%, 77%, 0.42) 0%, transparent 50%),
    radial-gradient(at 100% 100%, hsla(260, 40%, 80%, 0.35) 0%, transparent 40%),
    radial-gradient(at 0% 0%, hsla(300, 30%, 83%, 0.3) 0%, transparent 40%),
    hsl(270, 20%, 95%);
  color: var(--md-sys-color-on-surface);
  z-index: -1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s ease,
    color 0.3s ease;
  line-height: 1.5;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-regular, 400);
}
/* Dark mode adjustments */
html[data-theme='dark'] body,
body[data-theme='dark'] {
  background:
    radial-gradient(at 0% 100%, hsla(279, 60%, 14%, 0.7) 0%, transparent 50%),
    radial-gradient(at 100% 0%, hsla(230, 45%, 12%, 0.55) 0%, transparent 50%),
    radial-gradient(at 100% 100%, hsla(260, 40%, 10%, 0.5) 0%, transparent 40%),
    radial-gradient(at 0% 0%, hsla(300, 30%, 11%, 0.4) 0%, transparent 40%),
    hsl(277, 25%, 3%);
  color: var(--md-sys-color-on-surface);
}
main {
  width: 100%;
  margin: 2rem auto;
  padding: 0 0.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Typography styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, 'Poppins', system-ui, sans-serif);
  margin-top: 0;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}
h1 {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
}
h2 {
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-semibold, 600);
}
h3 {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: var(--font-weight-semibold, 600);
}
h4 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}
/* Responsive adjustments */
@media (max-width: 480px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 5rem);
  }
  main {
    margin: 0.5rem auto;
    padding: 0 0.25rem;
    max-width: 100%;
  }
}
@media (max-width: 360px) {
  main {
    margin: 0.25rem auto;
    padding: 0;
    max-width: 100%;
  }
}