/* =========================
   RESET
========================= */

/* Keeps padding and borders inside declared widths */
*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* =========================
   ROOT / DOCUMENT
========================= */

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

html,
body{
    min-height:100%;
}

body{
    background:var(--bg-main);
    color:var(--text-main);

    font-family:var(--font-main);

    line-height:1.5;

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;
}

/* =========================
   MEDIA DEFAULTS
========================= */

img,
picture,
video,
canvas,
svg{
    display:block;
    max-width:100%;
}

/* =========================
   FORM ELEMENTS
========================= */

input,
button,
textarea,
select{
    font:inherit;
    color:inherit;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

/* =========================
   LINKS
========================= */

a{
    color:inherit;
    text-decoration:none;
}

/* =========================
   LISTS
========================= */

ul,
ol{
    list-style:none;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6{
    font-weight:inherit;
}

/* =========================
   FONTS
========================= */

/* Primary UI font */
@font-face{
    font-family:"Inter";
    src:url("../fonts/inter/Inter-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Inter";
    src:url("../fonts/inter/Inter-Medium.woff2") format("woff2");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Inter";
    src:url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

/* Technical / system-label font */
@font-face{
    font-family:"IBM Plex Mono";
    src:url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

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

/* =========================
   DESIGN TOKENS
========================= */

:root{

    /* FONT STACKS */
    --font-main:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    /* BACKGROUNDS */
    --bg-main:#f6f6f3;
    --bg-soft:#efefeb;
    --bg-paper:#fbfbf8;

    /* TEXT */
    --text-main:#111111;
    --text-soft:#555555;
    --text-faint:#9b9b9b;

    /* LINES */
    --line-main:#d8d8d2;
    --line-soft:#e7e7e2;
    --line-dark:#b8b8b0;

    /* ACCENTS */
    --accent-primary:#1f5c55;
    --accent-soft:#5d8b86;

    /* SHADOWS */
    --shadow-soft:rgba(0,0,0,0.04);

    /* TEXTURE */
    --noise-opacity:0.2;
}