@import url('./font.css');

:root {
    /* Neutral */
    --color-neutral-11: #1D1D1D;
    --color-neutral-11-65: #1D1D1DA6;
    --color-neutral-11-35: #1D1D1D59;
    --color-neutral-11-15: #1D1D1D26;
    --color-neutral-11-07: #1D1D1D12;
    --color-neutral-75: #BFBFBF;
    --color-neutral-85: #D9D9D9;
    --color-neutral-96: #F5F5F5;
    --color-neutral-100: #FFFFFF;
    --color-neutral-100-20: #FFFFFF33;
    --color-neutral-100-35: #FFFFFF59;
    --color-neutral-100-45: #FFFFFF73;
    --color-neutral-100-65: #FFFFFFA6;

    /* Accent */
    --color-accent-95: #FEE7E7;
    --color-accent-85: #FBB6B6;
    --color-accent-56: #F42929;
    --color-accent-56-35: #F4292959;
    --color-accent-56-25: #F4292940;
    --color-accent-56-10: #F429291A;
    --color-accent-40: #C20A0A;
    --color-accent-30: #920707;

    /* Yellow */
    --color-yellow-60: #FEC634;
    --color-yellow-45: #E4A501;
    --color-yellow-60-35: #FEC63459;
    --color-yellow-20: #654A01;

    /* Green */
    --color-green-50: #ADD52A;
    --color-green-40: #8AAB21;
    --color-green-50-35: #ADD52A59;
    --color-green-20: #455511;

    /* Blue */
    --color-blue-65: #5673F5;
    --color-blue-65-30: #5673F54D;
    --color-blue-35: #0A27A9;
    --color-blue-15-65: #191A47A6;
    --color-blue-05-80: #070713BF;

    /* Purple */
    --color-purple-70: #BA6FF6;
    --color-purple-70-35: #BA6FF659;
    --color-purple-35: #620AA8;

    /* System */
    --color-system-transparent: rgba(0, 0, 0, 0);
    --color-system-transparent-white: rgba(255, 255, 255, 0);

    --color-full-black: rgba(0, 0, 0, 1);


    /* Font Weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;


    /* Font Family */
    --font-family-primary: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


    /* Media Breakpoint  */
    --breakpoint-mini-mobile: 320px;
    --breakpoint-small-average-mobile: 450px;
    --breakpoint-small-mobile: 576px;
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1440px;
}

h1, h2, h3, h4, h5, h6, blockquote {
    text-wrap: balance;
}

p, h1, h2, h3, h4, h5, h6, body, a, li, ul, ol, button {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}

body {
    font-style: normal;

    color-adjust: exact;
    -webkit-print-color-adjust: exact;

    overflow: -moz-scrollbars-none;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    width: 0px;
}

a, a:hover, a:active, a:visited, a:focus {
    text-decoration: none;
    -webkit-text-decoration: none;
    cursor: pointer;
    outline: none;
}

li {
    text-decoration: none;
    list-style-type: none;
}

ul, ol {
    list-style: none;
    text-decoration: none;
}

button {
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: inherit;
    text-decoration: none;
    user-select: none;
}

button::-moz-focus-inner {
    border: 0px;
    padding: 0px;
}


.banner:empty {
    display: none;
}


.container {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-color: var(--color-neutral-100);
}


/* Typography Classes */

.header-1 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-size: 40px;
    line-height: 48px;
}

.header-2 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-size: 34px;
    line-height: 40px;
}

.header-3 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 28px;
  line-height: 40px;
}

.header-4 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 20px;
  line-height: 32px;
}

.title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
}

.body-l-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
}

.body-m-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
}

.body-m-regular-extended {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
}

.body-m-medium {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
}

.body-s-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
}

.body-s-medium {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
}

.button {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
}

.button-small {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
}

.board-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
}


.font-light {
    font-weight: var(--font-weight-light);
}
.font-regular {
    font-weight: var(--font-weight-regular);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semibold {
    font-weight: var(--font-weight-semibold);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}
.font-black {
    font-weight: var(--font-weight-black);
}

.font-italic {
    font-style: italic;
}
.font-normal {
    font-style: normal;
}



.action-button {
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 16px;
    text-align: center;
    color: var(--color-neutral-100);
    background-color: var(--color-accent-56);

    transition: all 200ms ease-in-out;
}

.action-button:hover {
    background-color: var(--color-accent-40);
}