/**
 * Jiblotech 2.0
 * Typography System
 *
 * Display: Space Grotesk
 * Body: IBM Plex Sans
 * Technical: IBM Plex Mono
 */


/* ==========================================
   SPACE GROTESK
   ========================================== */

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


/* ==========================================
   IBM PLEX SANS
   ========================================== */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}


/* ==========================================
   IBM PLEX MONO
   ========================================== */

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


/* ==========================================
   BODY
   ========================================== */

body {
    font-family: var(--jb-font-body);
}


/* ==========================================
   HEADINGS
   ========================================== */

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


/* ==========================================
   DISPLAY
   ========================================== */

.heading-display {
    font-family: var(--jb-font-display);

    font-size: var(--jb-text-display);

    font-weight: 600;

    line-height: var(--jb-leading-tight);

    letter-spacing: -0.035em;
}


/* ==========================================
   TECHNICAL TEXT
   ========================================== */

.type-mono {
    font-family: var(--jb-font-mono);

    font-size: var(--jb-text-sm);

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: 0.02em;
}


/* ==========================================
   EYEBROW / LABEL
   ========================================== */

.eyebrow {
    font-family: var(--jb-font-mono);

    font-size: var(--jb-text-xs);

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================
   BODY TEXT
   ========================================== */

.text-large {
    font-family: var(--jb-font-body);

    font-size: var(--jb-text-lg);

    line-height: var(--jb-leading-relaxed);
}


.text-small {
    font-family: var(--jb-font-body);

    font-size: var(--jb-text-sm);

    line-height: var(--jb-leading-normal);
}