/* =========================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Single Source of Truth for All Pages
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
    /* Font Families - Dual Font System */
   
    

    /* Font Families - single system for the whole public site.
       Inter is loaded from Google Fonts in public/base.html and the stack
       falls back to the OS UI font, so text never renders in a random font. */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-body);

    /* Typography Scale - Fluid with clamp() */
    --font-h1: clamp(32px, 4.2vw, 58px);
    --font-h2: clamp(26px, 3vw, 42px);
    --font-h3: clamp(19px, 1.7vw, 28px);
    --font-h4: clamp(17px, 1.3vw, 22px);

    --font-body-size: clamp(15px, 1vw, 17px);
    --font-small: clamp(12px, 0.85vw, 13px);
    --font-button: clamp(14px, 0.95vw, 15px);
    --font-nav: clamp(14px, 0.95vw, 15px);

    /* Special Typography for KPI and Pricing */
    --font-kpi: clamp(24px, 3vw, 40px);
    --font-price: clamp(28px, 3.5vw, 46px);

    /* Line Heights */
    --line-height-heading: 1.15;
    --line-height-body: 1.6;
    --line-height-button: 1.2;
    --line-height-small: 1.5;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

.typo-h1 {
    font-family: var(--font-heading);
    font-size: var(--font-h1);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
}

.typo-h2 {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
}

.typo-h3 {
    font-family: var(--font-heading);
    font-size: var(--font-h3);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);
}

.typo-h4 {
    font-family: var(--font-heading);
    font-size: var(--font-h4);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);
}

.typo-body {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
}

.typo-small {
    font-family: var(--font-body);
    font-size: var(--font-small);
    line-height: var(--line-height-small);
}

.typo-button {
    font-family: var(--font-body);
    font-size: var(--font-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-weight-medium);
}

.typo-nav {
    font-family: var(--font-body);
    font-size: var(--font-nav);
    line-height: 1.2;
    font-weight: var(--font-weight-medium);
}

.typo-kpi {
    font-family: var(--font-body);
    font-size: var(--font-kpi);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
}

.typo-price {
    font-family: var(--font-body);
    font-size: var(--font-price);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
}

/* =========================================================
   GLOBAL HTML ELEMENT BASELINE
   ========================================================= */

body {
    
    font-size: var(--font-body-size);
    line-height: var(--line-height-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
}

h1 {
    font-size: 37px;
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-h3);
    font-weight: var(--font-weight-semibold);
}

h4 {
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

h5 {
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-medium);
}

h6 {
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
}

p {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    line-height: var(--line-height-body);
}

/* =========================================================
   BUTTON TYPOGRAPHY BASELINE
   ========================================================= */

button,
.btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-body);
    font-size: var(--font-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-weight-medium);
}

/* =========================================================
   NAVIGATION TYPOGRAPHY BASELINE
   ========================================================= */

nav,
.navbar,
.nav-link,
.menu-link {
    font-family: var(--font-body);
    font-size: var(--font-nav);
    font-weight: var(--font-weight-medium);
}

/* =========================================================
   FORM TYPOGRAPHY BASELINE
   ========================================================= */

input,
textarea,
select,
.form-control,
.form-select {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    line-height: var(--line-height-body);
}

label,
.form-label {
    font-family: var(--font-body);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
}

/* =========================================================
   PUBLIC SITE: ONE FONT FAMILY EVERYWHERE
   <body class="site-public"> is set in public/base.html.
   Pages used to hard-code Playfair Display / Inter / system fonts
   in their own <style> blocks; this makes every text element use
   --font-body. Icon elements (<i>, .fa*, .bi) are excluded on purpose
   so Font Awesome / Bootstrap Icons keep working.
   ========================================================= */

body.site-public {
    font-family: var(--font-body);
}

body.site-public :where(
    h1, h2, h3, h4, h5, h6,
    p, a, li, span, div, small, strong, em, b, blockquote,
    label, legend, input, button, select, option, textarea,
    th, td, dt, dd, figcaption
):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi) {
    font-family: var(--font-body) !important;
}