/* ================================
   Bold Label Core Typography (FIXED for Elementor)
   Fluid range: 360px → 1280px
   ================================ */

/* Inter Variable (self-hosted) */
@font-face {
    font-family: "BL Inter";
    src: url("../fonts/Inter-roman.var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ---------- Tokens ---------- */
:root {
    /* Fonts */
    --bl-font-body: "BL Inter";
    --bl-font-heading: "Space Grotesk";

    /* Weights */
    --bl-w-regular: 400;
    --bl-w-medium: 500;
    --bl-w-semibold: 600;
    --bl-w-bold: 700;

    /* Letter Spacing */
    --bl-ls-tight: -0.02em;

    /* Fluid range: 360px -> 1280px (920px span) */
    --bl-fluid-step: calc((100vw - 360px) / 920);

    /* Display 2xl: 44 -> 72 */
    --bl-display-2xl-size: clamp(44px, calc(44px + (28 * var(--bl-fluid-step))), 72px);
    --bl-display-2xl-lh: clamp(56px, calc(56px + (34 * var(--bl-fluid-step))), 90px);

    /* Display xl: 36 -> 60 */
    --bl-display-xl-size: clamp(36px, calc(36px + (24 * var(--bl-fluid-step))), 60px);
    --bl-display-xl-lh: clamp(44px, calc(44px + (28 * var(--bl-fluid-step))), 72px);

    /* Display lg: 30 -> 48 */
    --bl-display-lg-size: clamp(30px, calc(30px + (18 * var(--bl-fluid-step))), 48px);
    --bl-display-lg-lh: clamp(38px, calc(38px + (22 * var(--bl-fluid-step))), 60px);

    /* Display md: 26 -> 36 */
    --bl-display-md-size: clamp(26px, calc(26px + (10 * var(--bl-fluid-step))), 36px);
    --bl-display-md-lh: clamp(34px, calc(34px + (10 * var(--bl-fluid-step))), 44px);

    /* Display sm: 22 -> 30 */
    --bl-display-sm-size: clamp(22px, calc(22px + (8 * var(--bl-fluid-step))), 30px);
    --bl-display-sm-lh: clamp(30px, calc(30px + (8 * var(--bl-fluid-step))), 38px);

    /* Display xs: 20 -> 24 */
    --bl-display-xs-size: clamp(20px, calc(20px + (4 * var(--bl-fluid-step))), 24px);
    --bl-display-xs-lh: clamp(28px, calc(28px + (4 * var(--bl-fluid-step))), 32px);

    /* Text xl: 18 -> 20 */
    --bl-text-xl-size: clamp(18px, calc(18px + (2 * var(--bl-fluid-step))), 20px);
    --bl-text-xl-lh: clamp(28px, calc(28px + (2 * var(--bl-fluid-step))), 30px);

    /* Text lg: 16 -> 18 */
    --bl-text-lg-size: clamp(16px, calc(16px + (2 * var(--bl-fluid-step))), 18px);
    --bl-text-lg-lh: clamp(24px, calc(24px + (4 * var(--bl-fluid-step))), 28px);

    /* Standard Text Sizes */
    --bl-text-md-size: 16px;
    --bl-text-md-lh: 24px;

    --bl-text-sm-size: 14px;
    --bl-text-sm-lh: 20px;

    --bl-text-xs-size: 12px;
    --bl-text-xs-lh: 18px;
}





/* ---------- Base mapping ---------- */
body {
    font-family: var(--bl-font-body);
    font-size: var(--bl-text-md-size);
    line-height: var(--bl-text-md-lh);
    font-weight: var(--bl-w-regular);
}

body.wp-admin {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bl-font-heading);
    font-weight: inherit;
}




/* Headings defaults (semantic HTML stays sane) */
h1 {
    font-size: var(--bl-display-xl-size);
    line-height: var(--bl-display-xl-lh);
    letter-spacing: var(--bl-display-xl-ls);
}

h2 {
    font-size: var(--bl-display-lg-size);
    line-height: var(--bl-display-lg-lh);
    letter-spacing: var(--bl-display-lg-ls);
}

h3 {
    font-size: var(--bl-display-md-size);
    line-height: var(--bl-display-md-lh);
    letter-spacing: var(--bl-display-md-ls);
}

h4 {
    font-size: var(--bl-display-sm-size);
    line-height: var(--bl-display-sm-lh);
}

h5 {
    font-size: var(--bl-display-xs-size);
    line-height: var(--bl-display-xs-lh);
}

h6 {
    font-size: var(--bl-text-lg-size);
    line-height: var(--bl-text-lg-lh);
}

/* Elementor compatibility: force widgets to follow token font */

.elementor-heading-title {
    font-family: var(--bl-font-heading);
    font-weight: inherit;
}

.elementor-text-editor {
    font-family: var(--bl-font-body);
    font-weight: inherit;
}

.elementor-widget-text-editor {
    font-family: var(--bl-font-body);
    font-weight: inherit;
}