@layer generics, semantics, globals, components, overrides, themes;

@layer generics {
    :root {
        /* Color palette */
        --color--palette--blue: #3C4CC4;
        --color--palette--blue--contrast: #737FD9;
        --color--palette--blue--97: #F0F2FE;
        --color--palette--blue--90: #D1D6FA;
        --color--palette--blue--85: #BCC3F5;
        --color--palette--blue--80: #A9B1EF;
        --color--palette--blue--70: #858FE0;
        --color--palette--blue--50: #3B4BC4;
        --color--palette--blue--20: #000C66;

        --color--palette--black--true: #000;
        --color--palette--black--soft: #322D2A;
        --color--palette--black--brown: #583C09;
        --color--palette--black--navy: #084C83;
        --color--palette--black--forest: #136748;
        --color--palette--white--true: #FFF;
        --color--palette--white--natural: #FFFDF8;
        --color--palette--white--ivory: #FFFBEF;
        --color--palette--white--cool: #FDFDFD;
        --color--palette--white--haze: #FAFDFF;
        --color--palette--white--blush: #FFFAFD;
        --color--palette--highlight--yellow: #FCFF28;
        --color--palette--highlight--lime: #C9FB6D;
        --color--palette--highlight--teal: #BAFBC4;
        --color--palette--highlight--blue: #C4E9F8;
        --color--palette--highlight--lilac: #E1DAFD;
        --color--palette--highlight--pink: #FFD3DE;
        --color--palette--highlight--yellow--soft: #FDFE99;
        --color--palette--highlight--lime--soft: #DFFAAC;
        --color--palette--highlight--teal--soft: #D5FFD8;
        --color--palette--highlight--blue--soft: #DAF2FA;
        --color--palette--highlight--lilac--soft: #EEEAFF;
        --color--palette--highlight--pink--soft: #FFE9EF;

        --color--palette--green: #00AD43;
        --color--palette--green--alternate: #00993B;
        --color--palette--red: #FF5320;
        --color--palette--red--alternate: #EB3700;

        /* Font families */
        --font--family--brand: Flexa;
        --font--family--monospace: "Manifold Sans";
        --font--family--sans-serif: Circular;
        --font--family--serif: Alpina;

        --font--letter-spacing: normal;

        /* Font misc */
        --font--word-spacing: normal;

        /* Size */
        --size--border: 2px;
        --size--corner-radius: 3px;

        /* @link https://utopia.fyi/space/calculator?c=360,12,1.2,1240,16,1.25,5,2,1800&s=0.75|0.5|0.25,1.5|2|3|4,&g=s,l,xl,12 */
        --space-3xs: 0.25rem;
        --space-2xs: 0.5rem;
        --space-xs-new: 0.65rem;
        /* Maybe here */
        --space-xs: 0.75rem;
        --space-s: 1rem;
        --space-m-new: 1.25rem;
        --space-m: 1.5rem;
        --space-l: 2rem;
        --space-xl-new: 2.75rem;
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 6rem;
    }

    :root {
        /* font-size: clamp(75%, 0.85vw, 100%); */
    }

    :root {
        color: var(--color--text--primary);
    }

    * {
        font-variant-ligatures: common-ligatures;
        font-feature-settings: "liga" 1;
        margin: 0;
        padding: 0;
        row-gap: inherit;
        column-gap: inherit;
    }

    body {
        column-gap: 0;

        & main *, & header nav * {
            column-gap: var(--space-s);
        }
    }

    h1, h3, h4, h5, h6, ol, ul, dl, p, table, form,
    section > header {
        margin-bottom: var(--space-m);
    }

    h2 {
        margin-bottom: var(--space-m-new);
    }

    p:has(+ h2) {
        margin-bottom: var(--space-xl);
        /* Use for section spacing also */
    }

    section:has(+ section, div) {
        margin-bottom: var(--space-2xl);
    }

    svg {
        fill: currentColor;
    }


}