@layer variables;

:root {
  --color--accent: 85 85 242; /* #5555f2 */
  --color--accent--text: 255 255 255; /* #FFFFFF */
  --color--primary: 85 85 242; /* #5555f2 */
  --color--primary--text: 255 255 255; /* #FFFFFF */
  --color--secondary: 136, 144, 173; /* #8890AD */
  --color--secondary--text: 255 255 255; /* #FFFFFF */
  --color--light: 190 201 238; /* #BEC9EE */
  --color--light--text: 0 0 0; /* #000000 */
  --color--dark: 26 33 44; /* #1A212C */
  --color--dark--text: 255 255 255; /* #FFFFFF */

  --color--alert: 136, 144, 173; /* #8890AD */
  --color--alert--text: 0 0 0; /* #000000 */

  --color--success: 40 167 69; /* #28A745 */
  --color--success--text: 255 255 255; /* #FFFFFF */
  --color--danger: 220 53 69; /* #DC3545 */
  --color--danger--text: 255 255 255; /* #FFFFFF */
  --color--warning: 255 193 7; /* #DAA507 */
  --color--warning--text: 255 255 255; /* #FFFFFF */
  --color--info: 23 162 184; /* #17A2B8 */
  --color--info--text: 255 255 255; /* #FFFFFF */

  --color--twitch: #9146FF;
  --color--youtube: #FF0000;
  --color--discord: #7289DA;
  --color--twitter: #000000;
  --color--facebook: #3B5998;
  --color--instagram: #E1306C;
  --color--tiktok: #000000;
  --color--x: 000000;

  --background: 26 33 44;
  --color--shadow: 20 20 20;

  --card--background: 38 46 55;
  --card--border: 85 85 242;
  --card--border-radius: 10px;
  --card--text: 255 255 255;
  --card--title: 255 255 255;

  --component-shadow: 0px 4px 16px rgb(var(--color--shadow) / .25);

  --max--width: 1680px;

  --header--height-s: 48px;
  --header--height-m: 64px;
  --header--height-l: 80px;

  --header--background: 85 85 242;

  --modal-backdrop--background: 0 0 0;
  --modal--background: 26 33 44;
  --modal--color: 0 0 0;
  --modal--accent: 85 85 242;
  --modal--border: 85 85 242;
  --modal--border-light: 190 201 238;

  --tab--background: --modal--background;
  --tab--color: --modal-color;
  --tab--background-active: 85 85 242;
  --tab--color-active: 255 255 255;

  --crumbs--background: 190 201 238;
  --crumbs--background-active: 85 85 242;

  --user--background: 85 85 242;
  --user--color: 255 255 255;

  --button--background: 85 85 242;
  --button--color: 255 255 255;
  --button--outline-color: 85 85 242;
  --button--background-hover: 76 107 230;
  --button--color-hover: 255 255 255;

  --button--accept--background: 20 137 49;
  --button--accept--color: 235 235 235;
  --button--accept--background-hover: 40 167 69;
  --button--accept--color-hover: 235 235 235;

	--border-glow-mask: linear-gradient(#000, #000), linear-gradient(#000 0 0) content-box;
}

@layer variables {
  html {
    &[data-theme="dark"] {
      color-scheme: dark;

      /* colors */
      --app-styling-background: var(--color-palette-blue-greys-100);
      --app-styling-slate-level-1: var(--color-palette-blue-greys-200);
      --app-styling-slate-level-1-trans: var(--color-palette-blue-greys-200-trans);
      --app-styling-slate-level-2: #ffffff;
      --color-palette-perma-black: #000000;
      --color-palette-perma-white: #ffffff;
      --color-palette-blue-greys-100: #0f172a;
      --color-palette-blue-greys-200: #1e293b;
      --color-palette-blue-greys-200-trans: rgba(30, 41, 59, .5);
      --color-palette-blue-greys-200-08: rgba(30, 41, 59, .8);
      --color-palette-blue-greys-300: #334155;
      --color-palette-blue-greys-400: #475569;
      --color-palette-blue-greys-50: #020617;
      --color-palette-blue-greys-50-trans: rgba(33, 40, 51, .6);
      --color-palette-blue-greys-50-08: rgba(33, 40, 51, .8);
      --color-palette-blue-greys-500: #64748b;
      --color-palette-blue-greys-600: #94a3b8;
      --color-palette-blue-greys-700: #cbd5e1;
      --color-palette-blue-greys-800: #e2e8f0;
      --color-palette-blue-greys-900: #f1f5f9;
      --color-palette-blue-greys-950: #f8fafc;
      --color-palette-blue-greys-black: #ffffff;
      --color-palette-blue-greys-white: #000000;
      --color-palette-branding-dark: #5555f2;
      --color-palette-branding-dark-active: #e6e6fd;
      --color-palette-branding-dark-hover: #cacafb;
      --color-palette-branding-darker: #eeeefe;
      --color-palette-branding-lucent: #1e1e55;
      --color-palette-branding-lucent-active: #26266d;
      --color-palette-branding-lucent-hover: #333391;
      --color-palette-branding-normal: #5555f2;
      --color-palette-branding-normal-active: #4444c2;
      --color-palette-branding-normal-hover: #4444c2;
      --color-palette-bright-blue-100: #0c4a6e;
      --color-palette-bright-blue-200: #075985;
      --color-palette-bright-blue-300: #0369a1;
      --color-palette-bright-blue-400: #0284c7;
      --color-palette-bright-blue-50: #082f49;
      --color-palette-bright-blue-500: #0ea5e9;
      --color-palette-bright-blue-600: #38bdf8;
      --color-palette-bright-blue-700: #7dd3fc;
      --color-palette-bright-blue-800: #bae6fd;
      --color-palette-bright-blue-900: #e0f2fe;
      --color-palette-bright-blue-950: #f0f9ff;
      --color-palette-support-error: #fc522c;
      --color-palette-support-generated-text: #33cc67;
      --color-palette-support-success: #1c8d12;
      --color-palette-support-warn: #ffce21;
      --input-buttons-primary-bg-active: var(--color-palette-branding-lucent-active);
      --input-buttons-primary-bg-default: var(--color-palette-branding-normal);
      --input-buttons-primary-bg-disabled: var(--color-palette-blue-greys-200);
      --input-buttons-primary-bg-hover: var(--color-palette-branding-normal-active);
      --input-buttons-primary-text-active: var(--color-palette-perma-white);
      --input-buttons-primary-text-default: var(--color-palette-perma-white);
      --input-buttons-primary-text-disabled: var(--color-palette-blue-greys-400);
      --input-buttons-primary-text-hover: var(--color-palette-perma-white);
      --input-buttons-secondary-bg-active: var(--color-palette-blue-greys-500);
      --input-buttons-secondary-bg-default: var(--color-palette-blue-greys-50-trans);
      --input-buttons-secondary-bg-disabled: var(--color-palette-blue-greys-200);
      --input-buttons-secondary-bg-hover: var(--color-palette-blue-greys-50-08);
      --input-buttons-secondary-text-active: var(--color-palette-perma-white);
      --input-buttons-secondary-text-default: var(--color-palette-perma-white);
      --input-buttons-secondary-text-disabled: var(--color-palette-blue-greys-500);
      --input-buttons-secondary-text-hover: var(--color-palette-perma-white);
      --static-notification-banner-bg-error: var(--color-palette-support-error);
      --static-notification-banner-bg-success: var(--color-palette-support-success);
      --static-notification-banner-bg-warn: var(--color-palette-support-warn);
      --static-notification-banner-text-error: var(--color-palette-blue-greys-white);
      --static-notification-banner-text-success: var(--color-palette-blue-greys-white);
      --static-notification-banner-text-warn: var(--color-palette-blue-greys-white);
      --text-colors-default: var(--color-palette-blue-greys-900);
      --text-colors-link-active: var(--color-palette-bright-blue-800);
      --text-colors-link-default: var(--color-palette-bright-blue-500);
      --text-colors-link-hover: var(--color-palette-bright-blue-800);
      --top-banner-background: var(--color-palette-branding-normal);
      /* numbers */
      --corner-rounding-xs: 2px;
      --corner-rounding-s: 4px;
      --corner-rounding-m: 6px;
      --corner-rounding-l: 10px;
      --corner-rounding-xl: 16px;
    }
  }
}

html {  
  accent-color: var(--color-palette-branding-normal);
  padding: 0;
  margin: 0;
  container-type: inline-size;
  
  #localize-widget {
    display: none !important;
  }

  & body {
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;
    min-block-size: 100dvb;
    min-height: 100dvh;

    & .alert {
      width: 100%;
      max-width: 800px;
      padding: 10px 20px;
      border-radius: 5px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      margin: 0 auto;

      &.alert-success {
        background-color: rgb(var(--color--success));
        color: rgb(var(--color--success--text));
      }

      &.alert-danger {
        background-color: rgb(var(--color--danger));
        color: rgb(var(--color--danger--text));
      }

      &.alert-warning {
        background-color: rgb(var(--color--warning));
        color: rgb(var(--color--warning--text));
      }

      &.alert-info {
        background-color: rgb(var(--color--info));
        color: rgb(var(--color--info--text));
      }
    }

    & .container {
      max-width: 1280px;
    }

    & .mx-auto {
      margin-inline: auto;
    }

    & h1 {
      font-size: 36px;
      line-height: 44px;
    }

    & h2 {
      font-size: 32px;
      line-height: 40px;
    }

    & h3 {
      font-size: 24px;
      line-height: 32px;
    }

    & h4 {
      font-size: 20px;
      line-height: 24px;
    }

    & h5 {
      font-size: 16px;
      line-height: 20px;
    }

    .weight-thin {
      font-weight: 275;
    }

    .weight-regular {
      font-weight: 500;
    }

    .weight-bold {
      font-weight: 700;
    }

    & a[href] {
      color: var(--text-colors-link-default);
      text-decoration: none;

      &:hover {
        color: var(--text-colors-link-hover);
        text-decoration: underline;
      }
    }

    & p {
      line-height: 1.5;
      margin: 0;
    }

    & button:not(.nui) {
      --_background: var(--input-buttons-primary-bg-default);
      --_focus: var(--input-buttons-primary-bg-default);
      --_color: var(--input-buttons-primary-text-default);

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
      height: 44px;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      transition: .2s ease-in-out;
      text-transform: capitalize;
      border-radius: var(--corner-rounding-m);
      border: 1px solid transparent;
      background-color: var(--_background);
      color: var(--_color);
      cursor: pointer;
      outline: 0 solid var(--_focus);

      &:hover:not(:disabled) {
        --_background: var(--input-buttons-primary-bg-hover);
        --_color: var(--input-buttons-primary-text-hover);
      }

      &:focus-visible {
        border-color: var(--color-palette-blue-greys-950);
        box-shadow: 0 0 8px var(--text-colors-link-default);
        outline-width: 4px;
      }

      &:active {
        --_background: var(--input-buttons-primary-bg-active);
        --_color: var(--input-buttons-primary-text-active);
      }

      &[color="secondary"] {
        --_background: var(--input-buttons-secondary-bg-default);
        --_color: var(--input-buttons-secondary-text-default);

        &:hover:not(:disabled) {
          --_background: var(--input-buttons-secondary-bg-hover);
          --_color: var(--input-buttons-secondary-text-hover);
        }

        &:active {
          --_background: var(--input-buttons-secondary-bg-active);
          --_color: var(--input-buttons-secondary-text-active);
        }

        &:disabled {
          --_background: var(--input-buttons-secondary-bg-disabled);
          --_color: var(--input-buttons-secondary-text-disabled);
        }
      }

      &[color="success"] {
        --_background: var(--color-palette-support-success)  !important;
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="dark"] {
        --_background: var(--color--dark);
        border: none;

        &:focus-visible:not(:disabled) {
          outline-color: rgb(var(--color--dark));
        }
      }

      &[color="light"] {
        --_background: var(--color--light);
        border: none;
      }

      &[color="alert"] {
        --_background: var(--color--alert);
        border: none;
      }

      &[color="twitch"] {
        --_background: var(--color--twitch) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="youtube"] {
        --_background: var(--color--youtube) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="discord"] {
        --_background: var(--color--discord) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="twitter"] {
        --_background: var(--color--twitter) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="facebook"] {
        --_background: var(--color--facebook) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="instagram"] {
        --_background: var(--color--instagram) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[color="tiktok"] {
        --_background: var(--color--tiktok) !important;
        --_color: var(--color-palette-perma-white);
        border: none;

        &:hover:not(:disabled) {
          opacity: .5;
        }
      }

      &[variant="text"] {
        padding: 4px 8px;
        height: auto;
        background-color: none;
        border: none;
        color: inherit;
        display: inline-flex;
        text-decoration: underline;
        font-family: inherit;
        font-size: 1rem;
        font-weight: inherit;

        &:hover:not(:disabled) {
          background-color: rgb(0 0 0 / 30%);
        }
      }

      &[variant="outlined"] {
        background-color: transparent;
        border: 1px solid rgb(var(--_background));
        color: rgb(var(--_background));

        &:hover:not(:disabled) {
          background-color: rgb(var(--_background));
          color: rgb(var(--_color));
        }
      }

      &:disabled {
        --_background: var(--input-buttons-primary-bg-disabled);
        --_color: var(--input-buttons-primary-text-disabled);
        cursor: not-allowed;
      }

      &[size="sm"] {
        padding: 8px 16px;
        height: 32px;
        font-size: 14px;
      }

      &[size="lg"] {
        padding: 16px 32px;
        height: 56px;
        font-size: 18px;
      }

      &.ghost {
        background-color: transparent;
        border: 1px solid rgb(var(--_background));
        color: rgb(var(--_background));

        &:hover:not(:disabled) {
          background-color: rgb(var(--_background));
          color: rgb(var(--_color));
        }
      }
    }

    & :where(h1, h2, h3, h4, h5, h6) {
      margin: 0;
    }

    & :where(input[type], textarea, select):not(.nui, .multiselect__input) {
      display: block;
      padding: 10px;
      border: 1px solid var(--color-palette-blue-greys-400);
      border-radius: 4px;
      background-color: var(--color-palette-blue-greys-300);
      color: var(--color-palette-blue-greys-900);
      font-size: 14px;
      font-weight: 400;
      transition: .2s ease-in-out;
      outline: 0 solid rgb(var(--color--accent));

      &:focus-visible {
        outline-width: 3px;
        outline-offset: 1px;
      }
    }

    & select:not(.nui) {
      width: 100%;
      padding-inline-end: 20px;
      outline: 0 solid rgb(var(--color--accent));

      &:focus-visible {
        outline-width: 3px;
        outline-offset: 1px;
      }
    }

    & textarea:not(.nui) {
      height: auto;
      padding: 20px;
    }

    input:not(.nui) {
      position: relative;
      height: 40px;
      font-family: "Nunito", sans-serif;
      font-size: 15px;
      font-weight: 400;
      outline: 0 solid rgb(var(--color--accent));

      &:focus-visible {
        outline-width: 3px;
        outline-offset: 1px;
      }

      &:invalid {
        outline-color: rgb(var(--color--danger));
      }
    }

    & input[type="checkbox"]:not(.nui) {
      width: 20px;
      height: 20px;
      margin: 0;
      margin-right: 10px;
      padding: 0;
    }

    input[type="date"]:not(.nui)::-webkit-calendar-picker-indicator {
      cursor: pointer;
    }

    & .chip-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      & .chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        height: 32px;
        padding: 0 18px;
        transition: .2s ease-in-out;
        font-size: 13px;
        font-weight: 500;
        border-radius: 4px;
        background-color: #fcfcfc;
        color: rgb(0 0 0 / 60%);
        line-height: 32px;
        cursor: pointer;

        &:focus-within {
          outline: 3px solid rgb(var(--color--accent));
          outline-offset: 3px;
        }

        :focus-visible {
          border-radius: 100vw;
          outline: 2px solid rgb(var(--color--accent));
          outline-offset: 2px;
        }
      }
    }
  }
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Black.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-Thin.ttf') format('truetype');
  font-weight: 100;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito/Nunito-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Majesty';
  src: url('/fonts/Majesty/Majesty-Regular.otf') format('truetype');
  font-weight: 200;
}


@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(title),
::view-transition-old(page) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(title),
::view-transition-new(page) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}