UIKit Customization

// custom.scss
// 1. Import UIKit functions and variables
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 2. Customize variables
$global-primary-background:    #1e87f0;
$global-secondary-background:  #222;
$global-success-background:    #32d296;
$global-warning-background:    #faa05a;
$global-danger-background:     #f0506e;

// 3. Import UIKit
@import "uikit/src/scss/uikit-theme.scss";

// Color Variables
$global-color: #666;
$global-emphasis-color: #333;
$global-muted-color: #999;
$global-link-color: #1e87f0;
$global-link-hover-color: #0f6ecd;

// Background Colors
$global-background: #fff;
$global-muted-background: #f8f8f8;
$global-primary-background: #1e87f0;
$global-secondary-background: #222;

// Font Families
$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$global-font-size: 16px;
$global-line-height: 1.5;

// Headings
$base-heading-font-family: $global-font-family;
$base-heading-font-weight: normal;
$base-heading-color: $global-emphasis-color;
$base-heading-text-transform: none;
$base-heading-margin-top: 20px;

// H1-H6 sizes
$base-h1-font-size-m: 2.625rem; // 42px
$base-h2-font-size-m: 2rem;     // 32px
$base-h3-font-size-m: 1.5rem;   // 24px
$base-h4-font-size-m: 1.25rem;  // 20px
$base-h5-font-size-m: 1rem;     // 16px
$base-h6-font-size-m: 0.875rem; // 14px

// Button Variables
$button-padding-horizontal: 30px;
$button-padding-vertical: 10px;
$button-font-size: $global-font-size;
$button-line-height: $global-line-height;
$button-background: $global-muted-background;
$button-color: $global-color;
$button-hover-background: darken($button-background, 5%);
$button-hover-color: $global-color;
$button-active-background: darken($button-background, 10%);
$button-active-color: $global-color;

// Button Sizes
$button-small-padding-horizontal: 15px;
$button-small-padding-vertical: 5px;
$button-small-font-size: 0.875rem;
$button-large-padding-horizontal: 40px;
$button-large-padding-vertical: 15px;
$button-large-font-size: 1.125rem;

// Card Variables
$card-body-padding-horizontal: 30px;
$card-body-padding-vertical: 20px;
$card-title-font-size: 1.5rem;
$card-title-color: $global-emphasis-color;
$card-badge-background: $global-primary-background;
$card-badge-color: $global-inverse-color;
$card-hover-background: $global-muted-background;

// Create custom utility classes
.uk-custom-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.uk-text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// Responsive custom classes
@media (max-width: 960px) {
  .uk-custom-mobile {
    display: block !important;
  }
}