:root {
  --site-brutalist-radius: 5px;
  --site-brutalist-radius-sm: 3px;
  --site-brutalist-radius-md: 5px;
  --site-brutalist-radius-lg: 5px;
  --site-brutalist-radius-xl: 5px;
  --site-brutalist-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --site-brutalist-font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --site-brutalist-background: #dcebfe;
  --site-brutalist-foreground: #000000;
  --site-brutalist-secondary-background: #ffffff;
  --site-brutalist-overlay: rgba(0, 0, 0, 0.8);
  --site-brutalist-card: #ffffff;
  --site-brutalist-card-foreground: #171717;
  --site-brutalist-popover: #ffffff;
  --site-brutalist-popover-foreground: #171717;
  --site-brutalist-muted: #e5e5e5;
  --site-brutalist-muted-foreground: #525252;
  --site-brutalist-ring: #000000;
  --site-brutalist-destructive-ink: #9f1239;
  --site-brutalist-main: #5294ff;
  --site-brutalist-main-foreground: #000000;
  --site-brutalist-destructive: #ff4d50;
  --site-brutalist-destructive-foreground: #000000;
  --site-brutalist-border: #000000;
  --site-brutalist-input: #000000;
  --site-brutalist-primary: #5294ff;
  --site-brutalist-primary-foreground: #000000;
  --site-brutalist-secondary: #7a83ff;
  --site-brutalist-secondary-foreground: #000000;
  --site-brutalist-accent: #5294ff;
  --site-brutalist-accent-foreground: #000000;
  --site-brutalist-selection: #f4f1ea;
  --site-brutalist-selection-foreground: #1c1914;
  --site-brutalist-canary: #FACC00;
  --site-brutalist-canary-foreground: #000000;
  --site-brutalist-mint: #05E17A;
  --site-brutalist-mint-foreground: #000000;
  --site-brutalist-lavender: #7A83FF;
  --site-brutalist-lavender-foreground: #000000;
  --site-brutalist-coral: #FF4D50;
  --site-brutalist-coral-foreground: #000000;
  --site-brutalist-sky: #5294FF;
  --site-brutalist-sky-foreground: #000000;
}

:root.dark, :root[data-theme='dark'] {
  --site-brutalist-radius: 5px;
  --site-brutalist-radius-sm: 3px;
  --site-brutalist-radius-md: 5px;
  --site-brutalist-radius-lg: 5px;
  --site-brutalist-radius-xl: 5px;
  --site-brutalist-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --site-brutalist-font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --site-brutalist-background: #171717;
  --site-brutalist-foreground: #f5f5f5;
  --site-brutalist-secondary-background: #262626;
  --site-brutalist-overlay: rgba(0, 0, 0, 0.85);
  --site-brutalist-card: #262626;
  --site-brutalist-card-foreground: #f5f5f5;
  --site-brutalist-popover: #262626;
  --site-brutalist-popover-foreground: #f5f5f5;
  --site-brutalist-muted: #404040;
  --site-brutalist-muted-foreground: #d4d4d4;
  --site-brutalist-ring: #f5f5f5;
  --site-brutalist-destructive-ink: #fecdd3;
  --site-brutalist-main: #5294ff;
  --site-brutalist-main-foreground: #000000;
  --site-brutalist-destructive: #ff4d50;
  --site-brutalist-destructive-foreground: #000000;
  --site-brutalist-border: #000000;
  --site-brutalist-input: #000000;
  --site-brutalist-primary: #5294ff;
  --site-brutalist-primary-foreground: #000000;
  --site-brutalist-secondary: #7a83ff;
  --site-brutalist-secondary-foreground: #000000;
  --site-brutalist-accent: #5294ff;
  --site-brutalist-accent-foreground: #000000;
  --site-brutalist-selection: #f4f1ea;
  --site-brutalist-selection-foreground: #1c1914;
  --site-brutalist-canary: #FACC00;
  --site-brutalist-canary-foreground: #000000;
  --site-brutalist-mint: #05E17A;
  --site-brutalist-mint-foreground: #000000;
  --site-brutalist-lavender: #7A83FF;
  --site-brutalist-lavender-foreground: #000000;
  --site-brutalist-coral: #FF4D50;
  --site-brutalist-coral-foreground: #000000;
  --site-brutalist-sky: #5294FF;
  --site-brutalist-sky-foreground: #000000;
}

[data-site-control-family='brutalist'] {
  --pui-radius: 5px;
  --pui-radius-sm: 3px;
  --pui-radius-md: 5px;
  --pui-radius-lg: 5px;
  --pui-radius-xl: 5px;
  --pui-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --pui-font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --pui-background: #dcebfe;
  --pui-foreground: #000000;
  --pui-secondary-background: #ffffff;
  --pui-overlay: rgba(0, 0, 0, 0.8);
  --pui-card: #ffffff;
  --pui-card-foreground: #171717;
  --pui-popover: #ffffff;
  --pui-popover-foreground: #171717;
  --pui-muted: #e5e5e5;
  --pui-muted-foreground: #525252;
  --pui-ring: #000000;
  --pui-destructive-ink: #9f1239;
  --pui-main: #5294ff;
  --pui-main-foreground: #000000;
  --pui-destructive: #ff4d50;
  --pui-destructive-foreground: #000000;
  --pui-border: #000000;
  --pui-input: #000000;
  --pui-primary: #5294ff;
  --pui-primary-foreground: #000000;
  --pui-secondary: #7a83ff;
  --pui-secondary-foreground: #000000;
  --pui-accent: #5294ff;
  --pui-accent-foreground: #000000;
  --pui-selection: #f4f1ea;
  --pui-selection-foreground: #1c1914;
  --pui-canary: #FACC00;
  --pui-canary-foreground: #000000;
  --pui-mint: #05E17A;
  --pui-mint-foreground: #000000;
  --pui-lavender: #7A83FF;
  --pui-lavender-foreground: #000000;
  --pui-coral: #FF4D50;
  --pui-coral-foreground: #000000;
  --pui-sky: #5294FF;
  --pui-sky-foreground: #000000;
}

:root.dark [data-site-control-family='brutalist'], :root[data-theme='dark'] [data-site-control-family='brutalist'] {
  --pui-radius: 5px;
  --pui-radius-sm: 3px;
  --pui-radius-md: 5px;
  --pui-radius-lg: 5px;
  --pui-radius-xl: 5px;
  --pui-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --pui-font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --pui-background: #171717;
  --pui-foreground: #f5f5f5;
  --pui-secondary-background: #262626;
  --pui-overlay: rgba(0, 0, 0, 0.85);
  --pui-card: #262626;
  --pui-card-foreground: #f5f5f5;
  --pui-popover: #262626;
  --pui-popover-foreground: #f5f5f5;
  --pui-muted: #404040;
  --pui-muted-foreground: #d4d4d4;
  --pui-ring: #f5f5f5;
  --pui-destructive-ink: #fecdd3;
  --pui-main: #5294ff;
  --pui-main-foreground: #000000;
  --pui-destructive: #ff4d50;
  --pui-destructive-foreground: #000000;
  --pui-border: #000000;
  --pui-input: #000000;
  --pui-primary: #5294ff;
  --pui-primary-foreground: #000000;
  --pui-secondary: #7a83ff;
  --pui-secondary-foreground: #000000;
  --pui-accent: #5294ff;
  --pui-accent-foreground: #000000;
  --pui-selection: #f4f1ea;
  --pui-selection-foreground: #1c1914;
  --pui-canary: #FACC00;
  --pui-canary-foreground: #000000;
  --pui-mint: #05E17A;
  --pui-mint-foreground: #000000;
  --pui-lavender: #7A83FF;
  --pui-lavender-foreground: #000000;
  --pui-coral: #FF4D50;
  --pui-coral-foreground: #000000;
  --pui-sky: #5294FF;
  --pui-sky-foreground: #000000;
}