/* ================================
   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;
}

/* ---------- Tokens ---------- */
:root {
   /* Fonts */
   --bl-font-body: "BL Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
      sans-serif;
   --bl-font-heading: var(--bl-font-body);

   /* 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);
}

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

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

/* 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;
}