/* ==========================================================================
   EBRAINS Design System - primitive tokens
   ==========================================================================

   Source: https://design.ebrains.eu  (@ebrains/assets, styles/vars.css)

   This file contains ONLY the design system primitives: the web fonts, the
   raw colour ramps and the typographic scale, all prefixed --eb-*. It is a
   verbatim transcription of the upstream tokens and must stay that way:
   never put application rules here, so that it can be replaced wholesale
   when the design system is updated.

   The application maps these primitives onto its own semantic tokens
   (--hh-*) in assets/themes/hhnb.css, section 1.
   ========================================================================== */


/* ==========================================================================
   FONTS
   -------------------------------------------------------------------------
   Inter Light      display / headings
   IBM Plex Sans    UI and body copy
   IBM Plex Mono    code and technical content
   Self hosted (files under static/assets/fonts) - the application runs
   behind EBRAINS auth, so no third party font CDN is contacted.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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


:root {

    /* ======================================================================
       TYPEFACES
       ====================================================================== */

    --eb-inter:            Inter, Helvetica, Arial, sans-serif;
    --eb-plex-sans:        "IBM Plex Sans", Inter, Helvetica, Arial, sans-serif;
    --eb-plex-mono:        "IBM Plex Mono", "Courier New", Courier, monospace;


    /* ======================================================================
       BRAND
       ====================================================================== */

    --eb-brand-black:      #07140D;
    --eb-brand-green:      #00FF9D;
    --eb-brand-green-dark: #00C87B;

    --eb-white:            #FFFFFF;
    --eb-black:            #000000;
    --eb-grey-light:       #ECECEC;
    --eb-grey-dark:        #7A7B7A;


    /* ======================================================================
       COLOUR RAMPS
       ====================================================================== */

    --eb-grey-100:         #f8f8f8;
    --eb-grey-200:         #f2f2f2;
    --eb-grey-300:         #e6e6e6;
    --eb-grey-400:         #d8d8d8;
    --eb-grey-500:         #8c8c8c;
    --eb-grey-600:         #6e6e6e;
    --eb-grey-700:         #666666;
    --eb-grey-800:         #4d4d4d;
    --eb-grey-900:         #242424;

    --eb-green-100:        #eaffee;
    --eb-green-200:        #d3ffdc;
    --eb-green-300:        #9dffb4;
    --eb-green-400:        #63fb92;
    --eb-green-500:        #00e766;
    --eb-green-600:        #00c959;
    --eb-green-700:        #009d45;
    --eb-green-800:        #007734;
    --eb-green-900:        #004f23;

    --eb-yellow-100:       #fefee5;
    --eb-yellow-200:       #ffffcb;
    --eb-yellow-300:       #fdfdaa;
    --eb-yellow-400:       #ffff8b;
    --eb-yellow-500:       #ffff51;
    --eb-yellow-600:       #f3f30a;
    --eb-yellow-700:       #d7d72b;
    --eb-yellow-800:       #9a9a1e;
    --eb-yellow-900:       #636313;

    --eb-orange-100:       #fff4ee;
    --eb-orange-200:       #ffeade;
    --eb-orange-300:       #ffdcc5;
    --eb-orange-400:       #ffcca9;
    --eb-orange-500:       #ffb87e;
    --eb-orange-600:       #ffa543;
    --eb-orange-700:       #cb7f28;
    --eb-orange-800:       #995f1e;
    --eb-orange-900:       #653f14;

    --eb-red-100:          #feefef;
    --eb-red-200:          #ffe0e1;
    --eb-red-300:          #ffc7c9;
    --eb-red-400:          #ff9ea2;
    --eb-red-500:          #ff7a7f;
    --eb-red-600:          #ff4d68;
    --eb-red-700:          #d01111;
    --eb-red-800:          #a3001a;
    --eb-red-900:          #6f0011;

    --eb-purple-100:       #f9f3ff;
    --eb-purple-200:       #f4e8ff;
    --eb-purple-300:       #e9ceff;
    --eb-purple-400:       #ddb1ff;
    --eb-purple-500:       #d18fff;
    --eb-purple-600:       #c461ff;
    --eb-purple-700:       #af56e4;
    --eb-purple-800:       #8337b1;
    --eb-purple-900:       #3d1e4f;

    --eb-blue-100:         #eff0ff;
    --eb-blue-200:         #dee0ff;
    --eb-blue-300:         #caceff;
    --eb-blue-400:         #b2b8ff;
    --eb-blue-500:         #7a89f5;
    --eb-blue-600:         #2b69fc;
    --eb-blue-700:         #0034cb;
    --eb-blue-800:         #002799;
    --eb-blue-900:         #001a65;

    --eb-cyan-100:         #E0EEFF;
    --eb-cyan-200:         #D3E6FF;
    --eb-cyan-300:         #B5D8FF;
    --eb-cyan-400:         #92C8FF;
    --eb-cyan-500:         #6CBFFE;
    --eb-cyan-600:         #3FA9F5;
    --eb-cyan-700:         #267FBE;
    --eb-cyan-800:         #1F689B;
    --eb-cyan-900:         #15496D;


    /* ======================================================================
       TYPOGRAPHIC SCALE
       -------------------------------------------------------------------
       heading-*  Inter Light, display and section titles
       ui-*       IBM Plex Sans, controls and dense interface text
       body-*     IBM Plex Sans, running copy
       ====================================================================== */

    --eb-f-heading-03-size:    36px;
    --eb-f-heading-04-size:    28px;
    --eb-f-heading-05-size:    28px;
    --eb-f-heading-06-size:    22px;
    --eb-f-heading-weight:     300;
    --eb-f-heading-tracking:   -0.01em;

    --eb-f-body-01-size:       20px;
    --eb-f-body-02-size:       17px;
    --eb-f-body-line-height:   150%;

    --eb-f-ui-01-size:         18px;
    --eb-f-ui-02-size:         16px;
    --eb-f-ui-03-size:         14px;
    --eb-f-ui-04-size:         12px;
    --eb-f-ui-05-size:         10px;
    --eb-f-ui-line-height:     110%;
    --eb-f-ui-tracking:        -0.01em;

    --eb-f-caption-size:       12px;
    --eb-f-code-size:          14px;


    /* ======================================================================
       SPACING
       -------------------------------------------------------------------
       Base values are the smallest step; the breakpoint blocks at the end
       of this file widen them. See BREAKPOINTS below.
       ====================================================================== */

    --eb-inner-gutter:     8px;
    --eb-outer-gutter:     16px;
}


/* ==========================================================================
   BREAKPOINTS
   -------------------------------------------------------------------------
   The design system's viewport steps, and the only ones this application
   uses. CSS custom properties cannot appear in a media query, so the widths
   are written literally everywhere; these are the canonical values.

       sm     <  750px    base, declared without a media query
       md     >= 750px
       lg     >= 900px
       xl     >= 1024px
       xxl    >= 1280px
       xxxl   >= 2200px   (not used here)

   Every rule is written mobile first: the base declaration is the narrow
   layout and each min-width block only widens it.
   ========================================================================== */

@media (min-width: 750px) {
    :root {
        --eb-inner-gutter: 12px;
        --eb-outer-gutter: 20px;
    }
}

@media (min-width: 900px) {
    :root {
        --eb-inner-gutter: 16px;
        --eb-outer-gutter: 28px;
    }
}

/* The design system grows the display sizes at md, lg and xl: the utility
   classes below follow those steps. */

@media (min-width: 1024px) {
    :root {
        --eb-f-heading-04-size: 36px;
        --eb-f-heading-03-size: 42px;
    }
}


/* --------------------------------------------------------------------------
   Typographic utility classes, mirroring the design system's f-* helpers.
   Available to the templates when a one off piece of text has to adopt a
   design system style without a dedicated component rule.
   -------------------------------------------------------------------------- */

.f-heading-03,
.f-heading-04,
.f-heading-05,
.f-heading-06 {
    font-family: var(--eb-inter);
    font-weight: var(--eb-f-heading-weight);
    letter-spacing: var(--eb-f-heading-tracking);
    line-height: 120%;
}
.f-heading-03 { font-size: var(--eb-f-heading-03-size); }
.f-heading-04 { font-size: var(--eb-f-heading-04-size); }
.f-heading-05 { font-size: var(--eb-f-heading-05-size); }
.f-heading-06 { font-size: var(--eb-f-heading-06-size); }

.f-body-01,
.f-body-02 {
    font-family: var(--eb-plex-sans);
    font-weight: 400;
    line-height: var(--eb-f-body-line-height);
}
.f-body-01 { font-size: var(--eb-f-body-01-size); }
.f-body-02 { font-size: var(--eb-f-body-02-size); }

.f-ui-01,
.f-ui-02,
.f-ui-03,
.f-ui-04,
.f-ui-05 {
    font-family: var(--eb-plex-sans);
    font-weight: 400;
    line-height: var(--eb-f-ui-line-height);
    letter-spacing: var(--eb-f-ui-tracking);
}
.f-ui-01 { font-size: var(--eb-f-ui-01-size); }
.f-ui-02 { font-size: var(--eb-f-ui-02-size); }
.f-ui-03 { font-size: var(--eb-f-ui-03-size); }
.f-ui-04 { font-size: var(--eb-f-ui-04-size); }
.f-ui-05 { font-size: var(--eb-f-ui-05-size); }

.f-caption {
    font-family: var(--eb-plex-sans);
    font-size: var(--eb-f-caption-size);
    line-height: 120%;
}

.f-code {
    font-family: var(--eb-plex-mono);
    font-size: var(--eb-f-code-size);
    line-height: 140%;
}