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

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

:root {

    /* ============================
       COLORS
       ============================ */
    --color-primary: #000000;
    --color-secondary: #bababa;
    --color-bg: #ffffff;
    --color-bg-alt: #f3f1f1;

    /* ============================
       TYPOGRAPHY
       ============================ */
    --font-main: 'FaktPro', sans-serif;

    --font-size-s: 2.0rem;     /* 20px */
    --font-size-m: 2.5rem;     /* 25px */
    --font-size-l: 3.5rem;    /* 35px */
    --font-size-xl: 6.0rem;    /* 60px */
    --font-size-2xl: 7.3rem;    /* 120px */

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;


    /* ============================
       SPACING
       ============================ */
    --space-unit: 10px;

    --space-xs: calc(var(--space-unit) * 1);   /* 10px */
    --space-s: calc(var(--space-unit) * 1.5);   /* 15px */
    --space-m: calc(var(--space-unit) * 2);   /* 20px */
    --space-l: calc(var(--space-unit) * 5);   /* 50px */
    --space-xl: calc(var(--space-unit) * 8);   /* 80px */
    --space-2xl: calc(var(--space-unit) * 12); /* 120px */


    /* ============================
       LAYOUT
       ============================ */
    --container-max-width: 1200px;
    --container-padding: var(--space-m);

    --grid-gap: var(--space-m);


    /* ============================
       BORDERS & RADIUS
       ============================ */
    --radius-xs: 5px;
    --radius-s: 10px;
    --radius-m: 14px;

    --border-width: 1px;


    /* ============================
       TRANSITIONS
       ============================ */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 500ms ease;

}