/* =============================================================
   BASE — Global body, typography helpers, utilities
   Sources: Customizer CSS L5-8, L10-40, L100-111, L1693-1882, L2325-2387;
            style.css L13-28
   ============================================================= */

/* ==================== GLOBAL ==================== */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url('../img/noise.png');
    background-repeat: repeat !important;
    background-size: 100px !important;
}

/* Advanced heading links */
.kb-advanced-heading-link {
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ==================== UTILITIES ==================== */

.no-button {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.no-button:hover,
.no-button:active,
.no-button:focus {
    background: none;
    color: inherit;
}

.cursor-pointer {
    cursor: pointer;
}

.text-no-wrap {
    text-wrap: nowrap;
}

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

.colored-icon {
    color: var(--global-palette5);
    transition: color 0.3s ease-in-out;
}

.colored-icon:hover {
    color: var(--global-palette2);
}

/* Preem utility classes */
.preem-text-center { text-align: center !important; }
.preem-mb-1 { margin-bottom: 0.5rem !important; }
.preem-mb-2 { margin-bottom: 1rem !important; }
.preem-mb-3 { margin-bottom: 1.5rem !important; }
.preem-mb-4 { margin-bottom: 2rem !important; }
.preem-mb-5 { margin-bottom: 2.5rem !important; }

/* ==================== TYPOGRAPHY HELPERS ==================== */

/* Hero badge pill */
.preem-hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    background: var(--global-palette9);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--global-palette1);
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Hero title */
.preem-hero-title {
    font-size: 4rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    color: var(--global-palette3) !important;
    font-family: 'Sora', sans-serif !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
}

/* Gradient text utility */
.preem-gradient-text {
    background: linear-gradient(135deg, var(--global-palette1), var(--global-palette2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero subtitle */
.preem-subtitle {
    font-size: 1.375rem !important;
    color: var(--global-palette5) !important;
    line-height: 1.7 !important;
    margin-bottom: 3rem !important;
    text-align: center !important;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Section titles */
.preem-section-title {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 1rem !important;
    color: var(--global-palette3) !important;
    font-family: 'Sora', sans-serif !important;
    text-align: center !important;
}

.preem-section-subtitle {
    font-size: 1.125rem !important;
    color: var(--global-palette5) !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* Collection card titles */
.preem-collection-title {
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: var(--global-palette9) !important;
    font-family: 'Sora', sans-serif !important;
}

.preem-collection-highlight { color: var(--global-palette2) !important; }

.preem-collection-description {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.7 !important;
    margin-bottom: 2.5rem !important;
}

.preem-small-collection-title {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: var(--global-palette3) !important;
}

.preem-small-collection-description {
    font-size: 0.9375rem !important;
    color: var(--global-palette5) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* Color matcher headings */
.preem-matcher-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: var(--global-palette3) !important;
}

.preem-matcher-description {
    color: var(--global-palette5) !important;
    margin-bottom: 2rem !important;
}

.preem-input-label {
    display: block;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.625rem !important;
    color: var(--global-palette3) !important;
}

.preem-preview-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--global-palette5) !important;
    margin-bottom: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center !important;
}

.preem-color-code {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--global-palette3) !important;
    text-align: center !important;
}

.preem-match-name {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--global-palette3) !important;
    margin-bottom: 0.25rem !important;
    text-align: center !important;
}

.preem-match-code {
    font-size: 0.6875rem !important;
    color: var(--global-palette5) !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-align: center !important;
}

.preem-products-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    font-family: 'Sora', sans-serif !important;
}

.preem-trust-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
    color: var(--global-palette9) !important;
}

.preem-trust-description {
    font-size: 0.9375rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.preem-footer-heading {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--global-palette3) !important;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 992px) {
    .preem-hero-title { font-size: 3rem !important; }
    .preem-collection-title { font-size: 2rem !important; }
    .preem-collection-content { padding: 2.5rem 2rem; }
}

@media (max-width: 768px) {
    .preem-hero-title { font-size: 2.25rem !important; }
    .preem-subtitle { font-size: 1.125rem !important; }
    .preem-section-title { font-size: 2rem !important; }
    .preem-collection-title { font-size: 1.875rem !important; }
    .preem-color-matcher-card { padding: 2rem; }
}