:root {
    --color-accent: #EF7450;
    --color-on-accent: white;
    
    --color-background: white;
    --color-primary: rgba(0, 0, 0, 100%);
    --color-secondary: rgba(0, 0, 0, 70%);
    --color-tertiary: rgba(0, 0, 0, 50%);
    --color-selected: rgba(0, 0, 0, 4%);
    
    --color-surface: #FEF3EE;
    --color-border-primary: rgba(0, 0, 0, 60%);
    --color-border-secondary: rgba(0, 0, 0, 10%);
    
    --border-width: 1px;
    
    --outline-darken-border: 1px solid rgba(0, 0, 0, 10%);
    
    --size-button-height: 32px;
    
    --font-family-content: "Lato", sans-serif;
    
    --size-font-header-medium: 1.25rem;
    --size-font-header-small: 1.125rem;
    --size-font-body-small: 0.75rem;
    --size-font-body-medium: 0.875rem;
    --size-font-body-large: 1rem;
}

::selection {
    background-color: hsla(47 100% 49% / 40%);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Instrument Sans', sans-serif;
    
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

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

input {
    font-family: 'Instrument Sans', sans-serif;
}

/* Draws a semi-transparent border over the edges of the element */
.global-darken-border {
    outline: var(--outline-darken-border);
    outline-offset: -1px;
}