:root {
    color-scheme: light dark;

    --grey-100: #ffffff;
    --grey-98: #fafafa;
    --grey-96: #f5f5f5;
    --grey-94: #f0f0f0;
    --grey-92: #ebebeb;
    --grey-90: #e6e6e6;
    --grey-88: #e0e0e1;
    --grey-86: #dbdbdc;
    --grey-84: #d6d6d7;
    --grey-82: #d1d1d2;
    --grey-80: #cccbcd;
    --grey-78: #c7c6c7;
    --grey-76: #c2c1c3;
    --grey-74: #bdbbbe;
    --grey-72: #b8b6b9;
    --grey-70: #b3b1b4;
    --grey-68: #aeacaf;
    --grey-66: #a9a7aa;
    --grey-64: #a4a0a6;
    --grey-62: #9f9ba1;
    --grey-60: #9a969c;
    --grey-58: #949197;
    --grey-56: #8f8b92;
    --grey-54: #8a868d;
    --grey-52: #858089;
    --grey-50: #807a85;
    --grey-48: #7b767f;
    --grey-46: #76717a;
    --grey-44: #716c75;
    --grey-42: #6c676f;
    --grey-40: #67616b;
    --grey-38: #625c66;
    --grey-36: #5d5760;
    --grey-34: #57525b;
    --grey-32: #524e56;
    --grey-30: #4d4950;
    --grey-28: #48434c;
    --grey-26: #433e46;
    --grey-24: #3e3a41;
    --grey-22: #39353b;
    --grey-20: #343036;
    --grey-18: #2e2b31;
    --grey-16: #29262c;
    --grey-14: #242126;
    --grey-12: #1f1c21;
    --grey-10: #1a181b;
    --grey-8: #151316;
    --grey-6: #0f0e10;
    --grey-4: #0a090b;
    --grey-2: #050506;
    --grey-0: #000000;

    --utils-white: var(--grey-100);
    --utils-black: var(--grey-4);
    --utils-transparent: rgba(255, 255, 255, 0);

    --utils-shade-4: color-mix(in srgb, var(--utils-black), transparent 96%);
    --utils-shade-8: color-mix(in srgb, var(--utils-black), transparent 92%);
    --utils-shade-12: color-mix(in srgb, var(--utils-black), transparent 88%);
    --utils-shade-16: color-mix(in srgb, var(--utils-black), transparent 84%);
    --utils-shade-20: color-mix(in srgb, var(--utils-black), transparent 80%);
    --utils-shade-24: color-mix(in srgb, var(--utils-black), transparent 76%);
    --utils-shade-28: color-mix(in srgb, var(--utils-black), transparent 72%);
    --utils-shade-32: color-mix(in srgb, var(--utils-black), transparent 68%);
    --utils-shade-36: color-mix(in srgb, var(--utils-black), transparent 64%);
    --utils-shade-40: color-mix(in srgb, var(--utils-black), transparent 60%);
    --utils-shade-44: color-mix(in srgb, var(--utils-black), transparent 56%);
    --utils-shade-48: color-mix(in srgb, var(--utils-black), transparent 52%);
    --utils-shade-52: color-mix(in srgb, var(--utils-black), transparent 48%);
    --utils-shade-56: color-mix(in srgb, var(--utils-black), transparent 44%);
    --utils-shade-60: color-mix(in srgb, var(--utils-black), transparent 40%);
    --utils-shade-64: color-mix(in srgb, var(--utils-black), transparent 36%);
    --utils-shade-68: color-mix(in srgb, var(--utils-black), transparent 32%);
    --utils-shade-72: color-mix(in srgb, var(--utils-black), transparent 28%);
    --utils-shade-76: color-mix(in srgb, var(--utils-black), transparent 24%);
    --utils-shade-80: color-mix(in srgb, var(--utils-black), transparent 20%);
    --utils-shade-84: color-mix(in srgb, var(--utils-black), transparent 16%);
    --utils-shade-88: color-mix(in srgb, var(--utils-black), transparent 12%);
    --utils-shade-92: color-mix(in srgb, var(--utils-black), transparent 8%);
    --utils-shade-96: color-mix(in srgb, var(--utils-black), transparent 4%);

    --utils-tint-4: color-mix(in srgb, var(--utils-white), transparent 96%);
    --utils-tint-8: color-mix(in srgb, var(--utils-white), transparent 92%);
    --utils-tint-12: color-mix(in srgb, var(--utils-white), transparent 88%);
    --utils-tint-16: color-mix(in srgb, var(--utils-white), transparent 84%);
    --utils-tint-20: color-mix(in srgb, var(--utils-white), transparent 80%);
    --utils-tint-24: color-mix(in srgb, var(--utils-white), transparent 76%);
    --utils-tint-28: color-mix(in srgb, var(--utils-white), transparent 72%);
    --utils-tint-32: color-mix(in srgb, var(--utils-white), transparent 68%);
    --utils-tint-36: color-mix(in srgb, var(--utils-white), transparent 64%);
    --utils-tint-40: color-mix(in srgb, var(--utils-white), transparent 60%);
    --utils-tint-44: color-mix(in srgb, var(--utils-white), transparent 56%);
    --utils-tint-48: color-mix(in srgb, var(--utils-white), transparent 52%);
    --utils-tint-52: color-mix(in srgb, var(--utils-white), transparent 48%);
    --utils-tint-56: color-mix(in srgb, var(--utils-white), transparent 44%);
    --utils-tint-60: color-mix(in srgb, var(--utils-white), transparent 40%);
    --utils-tint-64: color-mix(in srgb, var(--utils-white), transparent 36%);
    --utils-tint-68: color-mix(in srgb, var(--utils-white), transparent 32%);
    --utils-tint-72: color-mix(in srgb, var(--utils-white), transparent 28%);
    --utils-tint-76: color-mix(in srgb, var(--utils-white), transparent 24%);
    --utils-tint-80: color-mix(in srgb, var(--utils-white), transparent 20%);
    --utils-tint-84: color-mix(in srgb, var(--utils-white), transparent 16%);
    --utils-tint-88: color-mix(in srgb, var(--utils-white), transparent 12%);
    --utils-tint-92: color-mix(in srgb, var(--utils-white), transparent 8%);
    --utils-tint-96: color-mix(in srgb, var(--utils-white), transparent 4%);

    --purple-100: light-dark(#e7def9, #311a49);
    --purple-200: light-dark(#d6c5f5, #442562);
    --purple-300: light-dark(#ba97ed, #643a8f);
    --purple-400: light-dark(#a878e8, #7b48ae);
    --purple-500: light-dark(#9d61e5, #8e54c8);
    --purple-600: light-dark(#944ce3, #9865cf);
    --purple-700: light-dark(#8c3edb, #9f72d2);
    --purple-800: light-dark(#8239cc, #a67ed6);
    --purple-900: light-dark(#6c2eab, #b697dd);
    --purple-1000: light-dark(#5a2590, #c5aee4);
    --purple-1100: light-dark(#4b1e79, #d3c2eb);

    --blue-100: light-dark(#d6e2ff, #11196c);
    --blue-200: light-dark(#b7cdff, #192490);
    --blue-300: light-dark(#82a5f3, #2937ce);
    --blue-400: light-dark(#618afe, #3851dc);
    --blue-500: light-dark(#4a75fe, #4866e0);
    --blue-600: light-dark(#3963fe, #5775e2);
    --blue-700: light-dark(#2f55fe, #6481e5);
    --blue-800: light-dark(#2746fd, #6f8ce7);
    --blue-900: light-dark(#1e1bfd, #89a2eb);
    --blue-1000: light-dark(#1805dc, #a3b7ef);
    --blue-1100: light-dark(#1304ba, #b9c9f3);

    --green-100: light-dark(#7efd77, #152a14);
    --green-200: light-dark(#35ec32, #1f3b1e);
    --green-300: light-dark(#2ac127, #31572f);
    --green-400: light-dark(#23a620, #3e6b3b);
    --green-500: light-dark(#1e931b, #487c45);
    --green-600: light-dark(#1a8418, #518a4e);
    --green-700: light-dark(#177a15, #579554);
    --green-800: light-dark(#147113, #5e9f5a);
    --green-900: light-dark(#0f5e0e, #6bb568);
    --green-1000: light-dark(#0b4e0a, #79cb75);
    --green-1100: light-dark(#074007, #85de80);

    --red-100: light-dark(#ffdad4, #4d0b0d);
    --red-200: light-dark(#ffbdb4, #681315);
    --red-300: light-dark(#ff8376, #961f22);
    --red-400: light-dark(#ff5349, #b8292c);
    --red-500: light-dark(#ff001b, #d33034);
    --red-600: light-dark(#e60117, #e9373b);
    --red-700: light-dark(#d40014, #f24949);
    --red-800: light-dark(#c60012, #f35e59);
    --red-900: light-dark(#a6000d, #f5847c);
    --red-1000: light-dark(#8b0009, #f7a29a);
    --red-1100: light-dark(#750006, #f8bab4);

    --amber-100: light-dark(#ffdacb, #431800);
    --amber-200: light-dark(#ffbea3, #5b2300);
    --amber-300: light-dark(#ff8651, #853700);
    --amber-400: light-dark(#f46100, #a24500);
    --amber-500: light-dark(#d95500, #ba5000);
    --amber-600: light-dark(#c44c00, #ce5a00);
    --amber-700: light-dark(#b54600, #de6100);
    --amber-800: light-dark(#a84000, #ec6800);
    --amber-900: light-dark(#8d3400, #ff8139);
    --amber-1000: light-dark(#752a00, #ffa171);
    --amber-1100: light-dark(#622200, #ffba97);

    --fill-100: light-dark(var(--grey-100), var(--grey-4));
    --fill-200: light-dark(var(--grey-96), var(--grey-8));
    --fill-300: light-dark(var(--grey-92), var(--grey-12));
    --fill-400: light-dark(var(--grey-88), var(--grey-16));
    --fill-500: light-dark(var(--grey-84), var(--grey-20));
    --fill-600: light-dark(var(--grey-80), var(--grey-24));

    --stroke-100: light-dark(var(--utils-shade-12), var(--utils-tint-12));
    --stroke-200: light-dark(var(--utils-shade-20), var(--utils-tint-20));
    --stroke-300: light-dark(var(--utils-shade-28), var(--utils-tint-28));
    --stroke-400: light-dark(var(--utils-shade-32), var(--utils-tint-32));
    --stroke-500: light-dark(var(--utils-shade-36), var(--utils-tint-36));
    --stroke-600: light-dark(var(--utils-shade-44), var(--utils-tint-44));

    --content-primary: light-dark(var(--utils-shade-88), var(--utils-tint-88));
    --content-secondary: light-dark(var(--utils-shade-72), var(--utils-tint-72));
    --content-tertiary: light-dark(var(--utils-shade-64), var(--utils-tint-64));
    --content-accent: var(--purple-900);
    --content-success: var(--green-900);
    --content-error: var(--red-900);
    --content-info: var(--blue-900);
    --content-warning: var(--amber-900);

    --interaction-accent-100: var(--purple-100);
    --interaction-accent-200: var(--purple-200);
    --interaction-accent-300: var(--purple-300);
    --interaction-accent-400: var(--purple-600);
    --interaction-accent-500: var(--purple-700);
    --interaction-accent-600: var(--purple-800);

    --interaction-success-100: var(--green-100);
    --interaction-success-200: var(--green-200);
    --interaction-success-300: var(--green-300);
    --interaction-success-400: var(--green-600);
    --interaction-success-500: var(--green-700);
    --interaction-success-600: var(--green-800);

    --interaction-destructive-100: var(--red-100);
    --interaction-destructive-200: var(--red-200);
    --interaction-destructive-300: var(--red-300);
    --interaction-destructive-400: var(--red-600);
    --interaction-destructive-500: var(--red-700);
    --interaction-destructive-600: var(--red-800);

    --interaction-information-100: var(--blue-100);
    --interaction-information-200: var(--blue-200);
    --interaction-information-300: var(--blue-300);
    --interaction-information-400: var(--blue-600);
    --interaction-information-500: var(--blue-700);
    --interaction-information-600: var(--blue-800);

    --interaction-warning-100: var(--amber-100);
    --interaction-warning-200: var(--amber-200);
    --interaction-warning-300: var(--amber-300);
    --interaction-warning-400: var(--amber-600);
    --interaction-warning-500: var(--amber-700);
    --interaction-warning-600: var(--amber-800);

    --size-0: 0rem;
    --size-1: 0.0625rem;
    --size-2: 0.125rem;
    --size-4: 0.25rem;
    --size-6: 0.375rem;
    --size-8: 0.5rem;
    --size-10: 0.625rem;
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-28: 1.75rem;
    --size-32: 2rem;
    --size-36: 2.25rem;
    --size-40: 2.5rem;
    --size-44: 2.75rem;
    --size-48: 3rem;
    --size-52: 3.25rem;
    --size-56: 3.5rem;
    --size-60: 3.75rem;
    --size-64: 4rem;
    --size-68: 4.25rem;
    --size-72: 4.5rem;
    --size-77: 4.75rem;
    --size-80: 5rem;
    --size-84: 5.25rem;
    --size-88: 5.5rem;
    --size-92: 5.75rem;
    --size-96: 6rem;
    --size-100: 6.25rem;
    --size-104: 6.5rem;
    --size-108: 6.75rem;
    --size-112: 7rem;
    --size-116: 7.25rem;
    --size-120: 7.5rem;
    --size-124: 7.75rem;
    --size-128: 8rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

html,
body {
    background-color: var(--fill-100);
    margin: 0;
    padding: 0;
}

*:not(svg, svg *) {
    font-family: 'Satoshi', sans-serif;
    margin: 0;
    padding: 0;
}

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

.container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--size-16);
    box-sizing: border-box;
}