html {
  color: var(--styling-color, #222);
  background: var(--styling-background, #fff);
  font-family: var(--styling-font-family, system-ui, -apple-system, sans-serif);
  font-size: var(--styling-font-size, 16px);
  font-weight: var(--styling-font-weight, 400);
  line-height: var(--styling-line-height, 1.6);
}

a {
  color: var(--styling-link-color, #1e87f0);
}

.uk-section-muted hr, .uk-section-muted .uk-hr {
  border-top-color: var(--styling-text-muted);
}

.uk-hr, hr {
	border-top-color: var(--styling-border, rgba(0,0,0,.12));
	border-top-width: var(--styling-border-width, 1px);
	margin: 0 0 var(--styling-spacing-md, 20px) 0;
}

/* headings */
h1,h2,h3,h4,h5,h6,
.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6 {
  font-family: var(--styling-primary-font-family, system-ui, -apple-system, sans-serif);
  font-weight: var(--styling-primary-font-weight, 700);
  text-transform: var(--styling-primary-text-transform, inherit);
  letter-spacing: var(--styling-primary-letter-spacing, inherit);
  color: var(--styling-emphasis-color, #000);
}

/* optional sizes wie LESS */
.uk-h1, h1 { font-size: var(--styling-2xlarge-font-size, 3rem); }
.uk-h2, h2 { font-size: var(--styling-xlarge-font-size, 2rem); }
.uk-h3, h3 { font-size: var(--styling-large-font-size, 1.5rem); }
.uk-h4, h4 { font-size: var(--styling-medium-font-size, 1.25rem); }
.uk-text-small, small { font-size: var(--styling-small-font-size, 0.9375rem); }

/* navbar */
.uk-navbar-container {
  min-height: var(--styling-navbar-nav-item-height, 100px);
  background: var(--styling-navbar-background, transparent);
  box-shadow: var(--styling-navbar-box-shadow, none);
}

.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  font-family: var(--styling-navbar-nav-item-font-family, var(--styling-font-family, system-ui, -apple-system, sans-serif));
  font-size: var(--styling-navbar-nav-item-font-size, var(--styling-font-size, 16px));
  font-weight: var(--styling-navbar-nav-item-font-weight, inherit);
  text-transform: var(--styling-navbar-nav-item-text-transform, inherit);
  color: var(--styling-color, #222);
}

/* dropdown */
.uk-dropdown,
.uk-navbar-dropdown {
  background: var(--styling-dropdown-background, #fff);
  color: var(--styling-navbar-dropdown-nav-item-color, #222);
  border-radius: var(--styling-borders-radius, 0px);
  border: var(--styling-border-width, 1px) solid var(--styling-border, rgba(0,0,0,.12));
}

.uk-dropdown a,
.uk-navbar-dropdown a {
  color: var(--styling-navbar-dropdown-nav-item-color, #222);
}

.uk-dropdown a:hover,
.uk-navbar-dropdown a:hover {
  color: var(--styling-navbar-dropdown-nav-item-hover-color, #000);
}

/* buttons base */
.uk-button {
  border-radius: var(--styling-borders-radius, 0px);
  border-width: var(--styling-border-width, 1px);
  border-style: solid;
  border-color: transparent;
  box-shadow: var(--styling-button-box-shadow, none);
}

/* button border style mapping */
.uk-button {
  border-radius: var(--styling-borders-radius, 0px);
}
.uk-button.uk-button-rounded {
  border-radius: var(--styling-borders-radius, 0px);
}
.uk-button.uk-button-round {
  border-radius: 999px;
}

/* default */
.uk-button-default {
  background: var(--styling-button-default-background, var(--styling-muted-background, #f5f5f5));
  color: var(--styling-button-default-color, var(--styling-emphasis-color, #000));
  border-color: var(--styling-border, rgba(0,0,0,.12));
}

.uk-button-default:hover,
.uk-button-default:focus {
  background: var(--styling-button-default-hover-background, color-mix(in srgb, var(--styling-button-default-background) 95%, #000 5%));
  color: var(--styling-button-default-hover-color, var(--styling-emphasis-color, #000));
}

/* primary */
.uk-button-primary {
  background: var(--styling-button-primary-background, var(--styling-primary-background, #1e87f0));
  color: var(--styling-button-primary-color, #fff);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
  background: var(--styling-button-primary-hover-background, color-mix(in srgb, var(--styling-button-primary-background) 80%, #fff 20%));
  color: var(--styling-button-primary-hover-color, color-mix(in srgb, var(--styling-button-primary-background) 70%, #000 30%));
}

/* secondary */
.uk-button-secondary {
  background: var(--styling-button-secondary-background, var(--styling-secondary-background, #222));
  color: var(--styling-button-secondary-color, #fff);
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background: var(--styling-button-secondary-hover-background, color-mix(in srgb, var(--styling-button-secondary-background) 80%, #fff 20%));
  color: var(--styling-button-secondary-hover-color, color-mix(in srgb, var(--styling-button-secondary-background) 70%, #000 30%));
}

/* cards */
.uk-card,
.uk-card-default,
.uk-card-primary,
.uk-card-secondary {
  border-radius: var(--styling-borders-radius, 0px);
  box-shadow: var(--styling-card-box-shadow, none);
}

.uk-card-default {
  background: var(--styling-background, #fff);
  color: var(--styling-color, #222);
  border: var(--styling-border-width, 1px) solid var(--styling-border, rgba(0,0,0,.12));
}

.uk-card-primary {
  background: var(--styling-primary-background, #1e87f0);
  color: var(--styling-inverse-color, #fff);
}

.uk-card-secondary {
  background: var(--styling-secondary-background, #222);
  color: var(--styling-inverse-color, #fff);
}

/* forms */
.uk-input,
.uk-select,
.uk-textarea {
  border-radius: var(--styling-borders-radius, 0px);
  border: var(--styling-border-width, 1px) solid var(--styling-border, rgba(0,0,0,.12));
  background: var(--styling-background, #fff);
  color: var(--styling-color, #222);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: var(--styling-primary-background, #1e87f0);
  outline: none;
}

/* sections */
.uk-section-default { background: var(--styling-background, #fff); }
.uk-section-primary { background: var(--styling-primary-background, #1e87f0); }
.uk-section-secondary { background: var(--styling-secondary-background, #222); }
.uk-section-muted { background: var(--styling-muted-background, #f5f5f5); }

/* offcanvas */
.uk-offcanvas-bar {
  background: var(--styling-offcanvas-bar-background, var(--styling-secondary-background, #222));
  width: var(--styling-offcanvas-bar-width, 300px);
}

@media (min-width: 640px) {
  .uk-offcanvas-bar {
    width: var(--styling-offcanvas-bar-width-s, 400px);
  }
}

/* offcanvas blur option (UIkit nutzt backdrop-filter ueber overlay, das hier ist ein leichter default) */
.uk-offcanvas-overlay::before {
  backdrop-filter: none;
}
:root[style*="--styling-offcanvas-overlay-background-blurred: true"] .uk-offcanvas-overlay::before {
  backdrop-filter: blur(8px);
}

/* Custom */
.o4-no-shadow {
  box-shadow: none !important;
}