:root {
    /* blue */
    --color-blue-100: #3184ff;
    --color-blue-200: #2f5a99;
    --color-blue-300: #95D1F1;
    --color-blue-400: #294168;
    /* yellow */
    --color-yellow-300: #E9CF97;
    /* brown */
    --color-brown-100: #dbcdc2;
    --color-brown-200: #d4b1a6;
    --color-brown-300: #b38f8a;
    --color-brown-400: #b38a8a;
    --color-brown-450: #7b6055;
    --color-brown-500: #715956;
    --color-brown-600: #6b443d;
    --color-brown-700: #39221e;
    /* cream */
    --color-cream-50: #f7f1e8;
    --color-cream-75: #f2ebe2;
    --color-cream-100: #eee6dc;
    /* gray */
    --color-gray-100: #f3f1f0;
    --color-gray-150: #e2e1da;
    --color-gray-200: #ececec;
    --color-gray-300: #d3d1ce;
    --color-gray-400: #838280;
    --color-gray-450: #5a5958;
    --color-gray-500: #202020;
    --color-gray-600: #1c1b1a;
    /* green */
    --color-green-100: #e2edd5;
    --color-green-300: #CADBB3;
    --color-green-600: #55dc83;
    /* mustard */
    --color-mustard-50: #ffefd8;
    --color-mustard-100: #ddaa61;
    --color-mustard-200: #ddbe78;
    --color-mustard-300: #a99154;
    --color-mustard-350: #bc924c;
    --color-mustard-400: #b88911;
    --color-mustard-500: #af751b;
    --color-mustard-700: #684d07;
    /* olive */
    --color-olive-100: #dee2cd;
    --color-olive-200: #ced4b8;
    --color-olive-300: #a6b399;
    --color-olive-400: #849671;
    --color-olive-500: #7b886d;
    --color-olive-600: #5c6f5d;
    --color-olive-700: #5b6550;
    --color-olive-800: #224228;
    --color-olive-900: #022c22;
    /* orange */
    --color-orange-100: #e1ba8b;
    --color-orange-200: #c98659;
    --color-orange-300: #c0865d;
    --color-orange-400: #bb8056;
    --color-orange-500: #cc612c;
    /* purple */
    --color-purple-100: #eeedf6;
    --color-purple-200: #cdcae7;
    --color-purple-300: #aca8d7;
    --color-purple-400: #817fa1;
    --color-purple-450: #605570;
    --color-purple-500: #4a4769;
    --color-purple-600: #4a4657;
    --color-purple-700: #3e2242;
    /* red */
    --color-red-100: #f2d0cb;
    --color-red-600: #ec3f27;
    /* coral */
    --color-coral-300: #FDA39B;
    /* sandstone */
    --color-sandstone-100: #fefaef;
    --color-sandstone-200: #f7f1e8;
    --color-sandstone-300: #efeae2;
    --color-sandstone-400: #efe6db;
    --color-sandstone-450: #e6ded3;
    --color-sandstone-500: #4a4741;

    /* fonts */
    --font-sans: 'AkkuratLLWeb-Regular', sans-serif;
    --font-light: 'AkkuratLLWeb-Light', sans-serif;
    --font-thin: 'AkkuratLLWeb-Thin', sans-serif;
    --font-bold: 'AkkuratLLWeb-Bold', sans-serif;

    /* inline theme */
    --color-background: var(--color-sandstone-200);
    --color-foreground: #ffffff;
    --color-button-primary: var(--color-blue-100);
    --color-button-primary-hover: var(--color-blue-200);
    --color-button-secondary-dark: var(--color-sandstone-500);
    --color-type-primary: var(--color-sandstone-500);
    --color-type-secondary: var(--color-gray-400);
}

/* Base styles */

body {
    background-color: var(--color-background);
    color: var(--color-type-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    /* text-base */
    line-height: 1.5rem;
    /* leading-6 */
    margin: 0;
}

h1 {
    font-size: 3rem;
    /* text-5xl */
    font-weight: bold;
    line-height: 1;
}

h2 {
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: bold;
}

h3 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: bold;
}

h4 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: bold;
}

h5 {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: bold;
}

h6 {
    font-size: 1rem;
    /* text-base */
    font-weight: bold;
}

a {
    color: var(--color-blue-100);
    text-decoration: underline;
}

table {
    display: grid;
}

thead,
tbody,
tr {
    display: contents;
}

th {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: bold;
}

th,
td {
    overflow: hidden;
    background-color: inherit;
    padding: 0.25rem 1rem;
    /* py-1 px-4 */
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button {
    cursor: pointer;
}

input[type='text'] {
    background-color: var(--color-foreground);
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-gray-300);
    padding: 1.25rem 0.5rem;
    /* py-5 px-2 */
}

input[type='checkbox'] {
    margin-right: 0.5rem;
    height: 1rem;
    width: 1rem;
    appearance: none;
    border: 2px solid var(--color-sandstone-500);
    border-radius: 0.1rem;
}

input[type='checkbox']:checked {
    border: none;
    background-color: var(--color-blue-100);
}

/* Custom scrollbars */
.scrollbar::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.5rem;
}

.scrollbar::-webkit-scrollbar-track {
    background-color: var(--color-background);
    border-radius: 0.25rem;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: var(--color-gray-400);
}