:root {
  /* Style Guide Colors */
  --white: #fff;

  --grape-purple-120: #49108a; /* (Active Purple) */
  --grape-purple-110: #53129e; /* Secondary (Hover Purple) */
  --grape-purple-100: #6817c5; /* Primary (Brand Purple) */
  --grape-purple-90: #772ecb;
  --grape-purple-80: #8645d1;
  --grape-purple-20: #e1d1f3; /* Tertiary (Accent Purple) */
  --grape-purple-0: #f3edfa;

  --gray-90: #232323; /* Primary (Brand Black) */
  --gray-80: #333333;
  --gray-70: #545454; /* Secondary (Muted Black) */
  --gray-60: #6c6c6c;
  --gray-50: #858585;
  --gray-40: #9d9d9d;
  --gray-20: #cecece; /* Quaternary (Stroke Gray) */
  --gray-10: #e7e7e7; /* Tertiary (Accent Gray) */
  --gray-0: #f6f7f7;

  --red-70: #8a2424;
  --red-50: #d63638;

  --orange-100: #ff8528;

  --sunglow-yellow-100: #ffc518;
  --sunglow-yellow-90: #ffcb2f;
  --sunglow-yellow-80: #ffd146;
  --sunglow-yellow-70: #ffd65d;

  --green-50: #008a20;
  --green-40: #00a32a;
  --green-30: #00ba37;

  --blueberry-blue: #3858e9;

  --brand-blue: var(--blueberry-blue);
  --brand-green: var(--green-30);
  --brand-yellow: var(--sunglow-yellow-100);
  --brand-orange: var(--orange-100);
  --brand-red: var(--red-50);

  /* Primary and Brand colors */
  --brand-primary: var(--grape-purple-100);
  --brand-secondary: var(--grape-purple-110);
  --brand-tertiary: var(--grape-purple-20);

  --brand-black: var(--gray-90);
  --brand-black-hover: var(--gray-80);
  --brand-black-muted: var(--gray-70);
  --brand-stroke-gray: var(--gray-20);
  --brand-accent-gray: var(--gray-10);
  --brand-white: var(--white);

  --sidebar-fg: var(--gray-20);
  --sidebar-fg-active: var(--white);
  --sidebar-bg: var(--brand-black);
  --sidebar-bg-active: var(--brand-black-hover);

  --text-dark: var(--gray-90);
  --text-normal: var(--gray-80);
  --text-normal-inverse: var(--brand-white);
  --text-muted: var(--gray-70);
  --text-muted-inverse: var(--gray-20);

  --border-normal: var(--brand-stroke-gray);
  --border-light: var(--gray-10);

  --surface-black: var(--brand-black);
  --surface-primary: var(--brand-white);
  --surface-primary-inverse: var(--brand-black);
  --surface-secondary: var(--gray-10);
  --surface-tertiary: #f9f9f9;
  --surface-under-page: #f0f0f0;

  --surface-dark: var(--brand-black-hover);
  --surface-danger: #f4a2a2;
  --surface-warning: #fff9e8;
  --surface-info: #f0eef3;
  --surface-success: #eff9f1;
  --surface-header: var(--gray-0);

  --surface-fg: var(--text-dark);

  /* WordPress variables in CSS custom props. https://github.com/WordPress/gutenberg/blob/f98c5f05a9e5de32573dd0127351e66cc97e93a5/packages/base-styles/_variables.scss */

  /* Grid System */
  --grid-unit: 8px;
  --grid-unit-05: calc(0.5 * var(--grid-unit)); /* 4px */
  --grid-unit-075: calc(0.75 * var(--grid-unit)); /* 6px */
  --grid-unit-10: calc(1 * var(--grid-unit)); /* 8px */
  --grid-unit-15: calc(1.5 * var(--grid-unit)); /* 12px */
  --grid-unit-20: calc(2 * var(--grid-unit)); /* 16px */
  --grid-unit-25: calc(2.5 * var(--grid-unit)); /* 20px */
  --grid-unit-30: calc(3 * var(--grid-unit)); /* 24px */
  --grid-unit-40: calc(4 * var(--grid-unit)); /* 32px */
  --grid-unit-50: calc(5 * var(--grid-unit)); /* 40px */
  --grid-unit-60: calc(6 * var(--grid-unit)); /* 48px */
  --grid-unit-70: calc(7 * var(--grid-unit)); /* 56px */
  --grid-unit-80: calc(8 * var(--grid-unit)); /* 64px */

  --radius-block-ui: 2px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --wp-admin-theme-color: var(--grape-purple-100);
  --wp-admin-theme-color-darker-10: var(--grape-purple-110);
  --wp-admin-theme-color-darker-20: var(--grape-purple-120);

  --wp-admin-border-width-focus: 2px;

  --wp-components-color-accent: var(--grape-purple-100);

  font-family: var(--font-stack);
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light;
  color: var(--text-normal);
  background-color: var(--surface-primary);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

a:not(.button) {
  font-weight: 500;
  color: var(--wp-admin-theme-color);
  text-decoration: none;
}

a:not(.button):hover {
  color: var(--wp-admin-theme-color-darker-10);
  text-decoration: underline;
}

a:not(.button):active {
  color: var(--wp-admin-theme-color-darker-20);
}

a:not(.button):visited {
  color: var(--wp-admin-theme-color);
}

body {
  margin: 0;
  font-size: 0.813rem;
  background-color: var(--surface-primary);
}

body * {
  box-sizing: border-box;
}

h1,
p {
  margin: 0;
}

hr {
  margin: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-normal);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  background-color: var(--surface-under-page);
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;

  max-width: 550px;
  margin: var(--grid-unit-15);
  padding: var(--grid-unit-25);
  text-align: left;
  background-color: var(--surface-primary);
  border-radius: 10px;
}

.heading {
  margin-bottom: var(--grid-unit-60);
}

.heading h1 {
  font-size: 2.25em;
  font-weight: 600;
  line-height: 1.1;
}

.logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: var(--grid-unit-30);
  padding-left: var(--grid-unit-30);
  padding-bottom: var(--grid-unit-60);
}

.logo {
  aspect-ratio: auto 389 / 56;
  width: 100%;
  max-height: 8rem;
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--grid-unit-30);
  margin-bottom: var(--grid-unit-50);
  padding-left: var(--grid-unit-15);
  padding-right: var(--grid-unit-15);
}

.body p {
  line-height: 1.6;
}

.action-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--grid-unit-70) 0;
}

.button {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  clear: both;
  cursor: pointer;
  display: inline-block;
  font-size: 0.813rem;
  font-weight: 400;
  outline: none;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  border: 0;
  transition: box-shadow 0.1s linear;
}

.button--primary {
  background-color: var(--wp-admin-theme-color);
  color: var(--text-normal-inverse);
}

.button--primary:hover {
  background-color: var(--wp-admin-theme-color-darker-10) !important;
}

.button--primary:focus,
.button--primary:focus-visible {
  box-shadow: inset 0 0 0 1px var(--surface-primary),
    0 0 0 2px var(--wp-admin-theme-color);
  outline: 3px solid transparent;
}

.button--primary:active {
  background-color: var(--wp-admin-theme-color-darker-20);

  box-shadow: inset 0 0 0 1px var(--surface-primary),
    0 0 0 2px var(--wp-admin-theme-color-darker-20);
  outline: 3px solid transparent;
}

a.button--link {
  background-color: transparent;
  color: var(--wp-admin-theme-color);
  border: 1px solid transparent;
}

a.button--link:hover {
  background-color: transparent;
  color: var(--wp-admin-theme-color-darker-10);
}

a.button--link:focus,
a.button--link:focus-visible {
  border: 1px solid var(--wp-admin-theme-color);
}

.font-semibold {
  font-weight: 600;
}

.text-center {
  text-align: center;
}

.text-nowrap {
  white-space: nowrap;
}

@media (min-width: 480px) {
  .main {
    padding: var(--grid-unit-60);
  }

  .logo-container {
    padding-right: 0;
    padding-left: 0;
  }
}