/* ============================================= */
/* ============== SOLARSENSE FONTS ============= */
/* ============================================= */
/* Project: SolarSense GmbH                      */
/* Heading: Abel (400)                            */
/* Body: Inter (300, 400, 500, 600, 700)          */
/* Updated: 2026-02-16                            */
/* ============================================= */


/* ---- Abel — Headings ---- */
@font-face {
    font-display: swap;
    font-family: 'Abel';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Abel-Regular.woff2') format('woff2'),
         url('/fonts/Abel-Regular.woff') format('woff'),
         url('/fonts/Abel-Regular.ttf') format('truetype');
}

/* ---- Inter — Body Text ---- */
/* Load via Google Fonts CDN or self-host the woff2 files */
/* Self-hosted example (place files in /fonts/): */

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/Inter-Light.woff2') format('woff2'),
         url('/fonts/Inter-Light.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Inter-Regular.woff2') format('woff2'),
         url('/fonts/Inter-Regular.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Inter-Medium.woff2') format('woff2'),
         url('/fonts/Inter-Medium.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2'),
         url('/fonts/Inter-SemiBold.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Inter-Bold.woff2') format('woff2'),
         url('/fonts/Inter-Bold.woff') format('woff');
}


/* ============================================= */
/* ================ BASE RESET ================ */
/* ============================================= */

html {
    font-size: 16px !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================= */
/* ============== TYPE SCALE ================== */
/* ============================================= */
/* Base: 16px                                     */
/* Scale ratio: ~1.333 (Perfect Fourth)           */
/*                                                */
/* h1: 3.75rem  (60px)  — Abel                   */
/* h2: 2.75rem  (44px)  — Abel                   */
/* h3: 2rem     (32px)  — Abel                   */
/* h4: 1.5rem   (24px)  — Abel                   */
/* h5: 1.25rem  (20px)  — Abel                   */
/* h6: 1.125rem (18px)  — Abel                   */
/* p:  1.0625rem (17px) — Inter                   */
/* ============================================= */

h1, .h1 {
    font-family: 'Abel', sans-serif !important;
    font-size: 5.75rem !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-family: 'Abel', sans-serif !important;
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
}

h3, .h3 {
    font-family: 'Abel', sans-serif !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

h4, .h4 {
    font-family: 'Abel', sans-serif !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

h5, .h5 {
    font-family: 'Abel', sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

h6, .h6 {
    font-family: 'Abel', sans-serif !important;
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

p, .p, li {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
    font-weight: 400;
}

a {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
}

small, .small {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}


/* ============================================= */
/* ============ FONT UTILITY CLASSES =========== */
/* ============================================= */

/* ---- Font Families ---- */
.abel { font-family: 'Abel', sans-serif; }
.inter { font-family: 'Inter', sans-serif; }

/* ---- Font Weights ---- */
.w-light { font-weight: 300; }
.w-regular { font-weight: 400; }
.w-medium { font-weight: 500; }
.w-semibold { font-weight: 600; }
.w-bold { font-weight: 700; }

/* ---- Letter Spacing ---- */
.ls-tight { letter-spacing: -0.02em; }
.ls-normal { letter-spacing: 0; }
.ls-wide { letter-spacing: 0.05em; }
.ls-wider { letter-spacing: 0.1em; }

/* ---- Text Utilities ---- */
.text-uppercase-spaced {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.text-balance {
    text-wrap: balance;
}

.hyphens {
    hyphens: auto;
    -webkit-hyphens: auto;
}

.no-margin {
    margin: 0 !important;
}

.ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    white-space: pre-wrap;
}

.ellipsis-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: pre-wrap;
}


/* ============================================= */
/* =========== RESPONSIVE TYPE SCALE =========== */
/* ============================================= */

/* Tablet (max 1200px) */
@media (max-width: 1200px) {
    h1, .h1 {
        font-size: 2.75rem !important;
        line-height: 1.15 !important;
    }

    h2, .h2 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }

    h3, .h3 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    h4, .h4 {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }

    p, .p, a, li {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    h1, .h1 {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
    }

    h2, .h2 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }

    h3, .h3 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    h4, .h4 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    h5, .h5,
    h6, .h6 {
        font-size: 1.0625rem !important;
        line-height: 1.4 !important;
    }

    p, .p, a, li {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
}

/* Small Mobile (max 400px) */
@media (max-width: 400px) {
    h1, .h1 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }

    h2, .h2 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
}