// _kernel.scss

// ====================================
// CSS Reset & Normalization
// ====================================
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

// ====================================
// Global Styles
// ====================================
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;  // Fixed pixel size for consistency across browsers
    line-height: 1.5;
    color: var(--color-dark);
    background-color: #fff;
    margin: 0;
    padding: 0;
    background-color: #f0f8ff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

// ====================================
// Global Utility Classes
// ====================================
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

// ====================================
// Form Elements
// ====================================
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 1rem;
}

p {
    margin-bottom: var(--spacing-md);
}

// Basic CSS reset/normalize
* {
    margin: 0;
    padding: 0;
}

// Ensure consistent box-sizing
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

// ====================================
// Responsive Helpers
// ====================================
@mixin respond-to($breakpoint) {
    @if $breakpoint == 'sm' {
        @media (min-width: 576px) { @content; }
    }
    @else if $breakpoint == 'md' {
        @media (min-width: 768px) { @content; }
    }
    @else if $breakpoint == 'lg' {
        @media (min-width: 992px) { @content; }
    }
    @else if $breakpoint == 'xl' {
        @media (min-width: 1200px) { @content; }
    }
}

// ====================================
// Mixins
// ====================================
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin transition($properties...) {
    transition-property: $properties;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}