:root {
  --quickstart-primary-color-light: #f7b42d;
  --quickstart-primary-color-dark: #f7b42d;
  --quickstart-primary-color: var(--quickstart-primary-color-light);
  --quickstart-secondary-color-light: #c38e22;
  --quickstart-secondary-color-dark: #A0BCAC;
  --quickstart-secondary-color: var(--quickstart-secondary-color-light);
  --quickstart-font-family: 'Arial', sans-serif;
  --quickstart-heading-font-family: inherit;
  --quickstart-logo-url: none;
  --quickstart-bg-logo-url: none;
  --quickstart-logo-height: 63px;
  --quickstart-logo-width: 300px;
  --quickstart-text-primary-light: #1a1a2e;
  --quickstart-text-primary-dark: #e8eaed;
  --quickstart-text-secondary-light: #374151;
  --quickstart-text-secondary-dark: #cbd5e1;
  --quickstart-bg-color-light: #4c5a74;
  --quickstart-bg-color-dark: #4c5a72;
  --quickstart-bg-color: var(--quickstart-bg-color-light);
  --quickstart-bg-image: var(--uploaded-bg-background);
  --quickstart-border-radius: 6px;
  --quickstart-card-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

html.pf-v5-theme-dark,
html.kcDarkModeClass {
  --quickstart-primary-color: var(--quickstart-primary-color-dark);
  --quickstart-secondary-color: var(--quickstart-secondary-color-dark);
  --quickstart-bg-color: var(--quickstart-bg-color-dark);
}

body,
body#keycloak-bg {
  margin: 0;
  background-color: var(--quickstart-bg-color);
}

.kcLogin,
.kcLoginClass {
  box-sizing: border-box;
  background-image: var(--quickstart-bg-image);
  background-color: var(--quickstart-bg-color);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}