/*
 * Finland Utility Classes
 * Replaces inline styles throughout Finland blade templates
 * Version: 1.0
 * Date: 2025-11-19
 */

/* ============================================
   TEXT COLORS
   ============================================ */
.finland-text-dark {
    color: var(--finland-text-primary) !important;
}

.finland-text-gray {
    color: var(--finland-text-secondary) !important;
}

.finland-text-muted {
    color: var(--finland-text-muted) !important;
}

.finland-text-white {
    color: #ffffff !important;
}

.finland-text-black {
    color: #1a1a1a !important;
}

.finland-text-body {
    color: #374151 !important;
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */
.finland-bg-hero {
    background: var(--finland-bg-hero) !important;
}

.finland-bg-white {
    background: var(--finland-bg-white) !important;
}

.finland-bg-light-blue {
    background: var(--finland-bg-light-blue) !important;
}

.finland-bg-gradient-hero {
    background: #e8eef7 !important;
}

.finland-bg-light-gray {
    background: #f5f8fa !important;
}

/* ============================================
   SPACING - MARGIN TOP
   ============================================ */
.finland-mt-xs {
    margin-top: 6px !important;
}

.finland-mt-sm {
    margin-top: 12px !important;
}

.finland-mt-md {
    margin-top: 24px !important;
}

.finland-mt-lg {
    margin-top: 40px !important;
}

.finland-mt-xl {
    margin-top: 60px !important;
}

/* ============================================
   SPACING - MARGIN BOTTOM
   ============================================ */
.finland-mb-xs {
    margin-bottom: 6px !important;
}

.finland-mb-sm {
    margin-bottom: 12px !important;
}

.finland-mb-md {
    margin-bottom: 24px !important;
}

.finland-mb-lg {
    margin-bottom: 40px !important;
}

.finland-mb-xl {
    margin-bottom: 60px !important;
}

/* ============================================
   SPACING - PADDING
   ============================================ */
.finland-pt-sm {
    padding-top: 12px !important;
}

.finland-pt-md {
    padding-top: 24px !important;
}

.finland-pt-lg {
    padding-top: 60px !important;
}

.finland-pt-xl {
    padding-top: 80px !important;
}

.finland-pb-sm {
    padding-bottom: 12px !important;
}

.finland-pb-md {
    padding-bottom: 24px !important;
}

.finland-pb-lg {
    padding-bottom: 60px !important;
}

.finland-pb-xl {
    padding-bottom: 80px !important;
}

.finland-p-sm {
    padding: 12px !important;
}

.finland-p-md {
    padding: 24px !important;
}

.finland-p-lg {
    padding: 40px !important;
}

/* ============================================
   TYPOGRAPHY - FONT SIZES
   ============================================ */
.finland-text-xs {
    font-size: 0.75rem !important;
}

.finland-text-sm {
    font-size: 0.875rem !important;
}

.finland-text-base {
    font-size: 1rem !important;
}

.finland-text-lg {
    font-size: 1.1rem !important;
}

.finland-text-xl {
    font-size: 1.25rem !important;
}

.finland-text-2xl {
    font-size: 1.5rem !important;
}

/* ============================================
   TYPOGRAPHY - FONT WEIGHTS
   ============================================ */
.finland-font-normal {
    font-weight: 400 !important;
}

.finland-font-medium {
    font-weight: 500 !important;
}

.finland-font-semibold {
    font-weight: 600 !important;
}

.finland-font-bold {
    font-weight: 700 !important;
}

/* ============================================
   LAYOUT - BORDER RADIUS
   ============================================ */
.finland-rounded-sm {
    border-radius: 6px !important;
}

.finland-rounded-md {
    border-radius: 8px !important;
}

.finland-rounded-lg {
    border-radius: 12px !important;
}

.finland-rounded-xl {
    border-radius: 16px !important;
}

.finland-rounded-full {
    border-radius: 50% !important;
}

.finland-rounded-pill {
    border-radius: 20px !important;
}

/* ============================================
   LAYOUT - BOX SHADOW
   ============================================ */
.finland-shadow-sm {
    box-shadow: var(--finland-shadow-sm) !important;
}

.finland-shadow-md {
    box-shadow: var(--finland-shadow-md) !important;
}

.finland-shadow-lg {
    box-shadow: var(--finland-shadow-lg) !important;
}

.finland-shadow-yellow {
    box-shadow: var(--finland-shadow-yellow) !important;
}

.finland-shadow-blue {
    box-shadow: var(--finland-shadow-blue) !important;
}

/* ============================================
   LAYOUT - BORDERS
   ============================================ */
.finland-border-light {
    border: 1px solid var(--finland-border-light) !important;
}

.finland-border-gray {
    border: 1px solid var(--finland-border-gray) !important;
}

.finland-border-b {
    border-bottom: 1px solid var(--finland-border-light) !important;
}

.finland-border-t {
    border-top: 1px solid var(--finland-border-light) !important;
}

.finland-border-yellow {
    border: 2px solid var(--finland-yellow) !important;
}

.finland-border-none {
    border: none !important;
}

/* ============================================
   LAYOUT - DISPLAY & POSITIONING
   ============================================ */
.finland-relative {
    position: relative !important;
}

.finland-absolute {
    position: absolute !important;
}

.finland-overflow-hidden {
    overflow: hidden !important;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */
.finland-flex {
    display: flex !important;
}

.finland-flex-col {
    flex-direction: column !important;
}

.finland-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.finland-items-center {
    align-items: center !important;
}

.finland-justify-center {
    justify-content: center !important;
}

.finland-justify-between {
    justify-content: space-between !important;
}

/* ============================================
   WIDTH & HEIGHT UTILITIES
   ============================================ */
.finland-w-full {
    width: 100% !important;
}

.finland-h-full {
    height: 100% !important;
}

.finland-max-w-xs {
    max-width: 300px !important;
}

.finland-max-w-sm {
    max-width: 500px !important;
}

.finland-max-w-md {
    max-width: 700px !important;
}

.finland-max-w-lg {
    max-width: 900px !important;
}

.finland-max-w-xl {
    max-width: 1100px !important;
}

/* ============================================
   GAP UTILITIES
   ============================================ */
.finland-gap-xs {
    gap: 8px !important;
}

.finland-gap-sm {
    gap: 12px !important;
}

.finland-gap-md {
    gap: 16px !important;
}

.finland-gap-lg {
    gap: 24px !important;
}

.finland-gap-xl {
    gap: 32px !important;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */
.finland-text-left {
    text-align: left !important;
}

.finland-text-center {
    text-align: center !important;
}

.finland-text-right {
    text-align: right !important;
}

/* ============================================
   LINE HEIGHT
   ============================================ */
.finland-leading-tight {
    line-height: 1.2 !important;
}

.finland-leading-normal {
    line-height: 1.5 !important;
}

.finland-leading-relaxed {
    line-height: 1.6 !important;
}

.finland-leading-loose {
    line-height: 1.8 !important;
}

/* ============================================
   OPACITY UTILITIES
   ============================================ */
.finland-opacity-90 {
    opacity: 0.9 !important;
}

.finland-opacity-80 {
    opacity: 0.8 !important;
}

.finland-opacity-70 {
    opacity: 0.7 !important;
}

.finland-opacity-50 {
    opacity: 0.5 !important;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */
.finland-transition {
    transition: all 0.3s ease !important;
}

.finland-transition-fast {
    transition: all 0.2s ease !important;
}

.finland-transition-slow {
    transition: all 0.5s ease !important;
}

/* ============================================
   CURSOR UTILITIES
   ============================================ */
.finland-cursor-pointer {
    cursor: pointer !important;
}

.finland-cursor-default {
    cursor: default !important;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    .finland-mobile-text-center {
        text-align: center !important;
    }

    .finland-mobile-w-full {
        width: 100% !important;
    }

    .finland-mobile-mb-sm {
        margin-bottom: 12px !important;
    }

    .finland-mobile-mb-md {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 576px) {
    .finland-sm-text-center {
        text-align: center !important;
    }

    .finland-sm-p-sm {
        padding: 12px !important;
    }

    .finland-sm-mt-sm {
        margin-top: 12px !important;
    }
}