/* ==========================================================================
   CB Design System
   Base Styles
   Version: 1.0.0
   ========================================================================== */

/* ----------------------------------------
   Box Model
---------------------------------------- */

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

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* ----------------------------------------
   Document
---------------------------------------- */

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

/* ----------------------------------------
   Body
---------------------------------------- */

body {
    margin: 0;

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

    color: var(--color-text);

    background-color: var(--color-background);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Typography
---------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
pre {
    margin: 0;
}

/* ----------------------------------------
   Lists
---------------------------------------- */

ul,
ol {
    margin: 0;
    padding: 0;

    list-style: none;
}

/* ----------------------------------------
   Media
---------------------------------------- */

img,
picture,
svg,
video,
canvas {
    display: block;

    max-width: 100%;

    height: auto;
}

/* ----------------------------------------
   Links
---------------------------------------- */

a {
    color: inherit;

    text-decoration: none;
}

/* ----------------------------------------
   Form Controls
---------------------------------------- */

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

    color: inherit;
}

/* ----------------------------------------
   Button
---------------------------------------- */

button {
    cursor: pointer;

    border: 0;

    background: transparent;

    padding: 0;
}

/* ----------------------------------------
   Focus
---------------------------------------- */

:focus-visible {

    outline: 2px solid var(--color-brand);

    outline-offset: 2px;

}

/* ----------------------------------------
   Selection
---------------------------------------- */

::selection {

    background: var(--color-brand);

    color: #fff;

}