/*
 * MainPath look for the forked CMS.
 * Dark surfaces, blue accent and tight corners match the MainPath app.
 */
:root,
:host,
:root[data-theme='dark'],
:host[data-theme='dark'] {
  --sui-base-hue: 216;
  --sui-font-family-default: 'Geist', 'Geist Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --sui-background-color-1-hsl: 216 12% 8%;
  --sui-background-color-2-hsl: 216 14% 11%;
  --sui-background-color-3-hsl: 218 12% 15%;
  --sui-background-color-4-hsl: 218 10% 18%;
  --sui-background-color-5-hsl: 217 12% 26%;
  --sui-foreground-color-1-hsl: 45 14% 96%;
  --sui-foreground-color-2-hsl: 40 8% 92%;
  --sui-foreground-color-3-hsl: 40 6% 72%;
  --sui-foreground-color-4-hsl: 40 4% 58%;
  --sui-border-color-1-hsl: 220 8% 32%;
  --sui-border-color-2-hsl: 220 10% 22%;
  --sui-border-color-3-hsl: 220 10% 18%;
  --sui-primary-accent-color: #60a5fa;
  --sui-primary-accent-color-light: #93c5fd;
  --sui-primary-accent-color-dark: #3b82f6;
  --sui-primary-accent-color-text: #93c5fd;
  --sui-primary-accent-color-inverted: #15181d;
  --sui-primary-accent-color-translucent: hsl(213 94% 68% / 55%);
  --sui-primary-accent-color-translucent-light: hsl(213 94% 68% / 35%);
  --sui-button-small-border-radius: 0.25rem;
  --sui-button-medium-border-radius: 0.25rem;
  --sui-button-large-border-radius: 0.25rem;
  --sui-control-small-border-radius: 0.25rem;
  --sui-control-medium-border-radius: 0.25rem;
  --sui-control-large-border-radius: 0.25rem;
  --sui-textbox-border-radius: 0.25rem;
}

:root[data-theme='light'],
:host[data-theme='light'] {
  --sui-background-color-1-hsl: 40 14% 100%;
  --sui-background-color-2-hsl: 40 18% 96%;
  --sui-background-color-3-hsl: 40 14% 92%;
  --sui-foreground-color-1-hsl: 216 14% 10%;
  --sui-foreground-color-2-hsl: 216 14% 12%;
  --sui-primary-accent-color: #3b82f6;
  --sui-primary-accent-color-light: #60a5fa;
  --sui-primary-accent-color-dark: #2563eb;
  --sui-primary-accent-color-text: #2563eb;
  --sui-primary-accent-color-inverted: #f2f1ed;
}