@layer config, common;

@import "/styles/common.css" layer(common);

@layer config {

  @font-face {
    font-family: "urbanist";
    font-weight: 400;
    font-style: normal;
    src: url("/theme/fortuna/fonts/urbanist/urbanist-regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "urbanist";
    font-weight: 700;
    font-style: normal;
    src: url("/theme/fortuna/fonts/urbanist/urbanist-bold.woff2") format("woff2");
  }

  :root {
    --font: urbanist, Helvetica, Arial, sans-serif;
    --fonts-body: var(--font);
    --fonts-heading: var(--font);

    --mobile-fs-title: 1.125rem;
    --mobile-lh-title: 1.5rem;
    --desktop-fs-title: 1.5rem;
    --desktop-lh-title: 2rem;

    --mobile-fs-text: .875rem;
    --mobile-lh-text: 1.25rem;
    --desktop-fs-text: 1rem;
    --desktop-lh-text: 1.5rem;

    --colors-base-primary: #F2D452;

    --colors-text-primary: #E3DECF;
    --colors-text-secondary: #BBB195;

    --colors-background-primary: #1a012e;
    --colors-background-secondary: #430580;

    --colors-outlined-primary: var(--colors-base-primary);
    --colors-outlined-secondary-05: #DB6CFF80;
    --colors-outlined-secondary-01: #DB6CFF1A;

    --button-primary-default-color: #1F0137;
    --button-primary-default-background: var(--colors-base-primary);
    --button-primary-default-border: #DB6CFF;

    --button-primary-hover-color: #1F0137;
    --button-primary-hover-background: #D3AF15;
    --button-primary-hover-border: #D3AF15;

    --button-secondary-default-color: var(--colors-text-primary);
    --button-secondary-default-background: transparent;
    --button-secondary-default-border: #DB6CFF;

    --button-secondary-hover-color: var(--colors-text-primary);
    --button-secondary-hover-background: var(--colors-background-secondary);
    --button-secondary-hover-border: #B522FC;

    --button-secondary-disabled-color: #766E57;
    --button-secondary-disabled-background: transparent;
    --button-secondary-disabled-border: #5D05A6;

    --logo-height: 40px;
  }
}

@layer common {

  .landing--coming-soon {
    align-content: start;
  }

  @media screen and (max-width: calc(62rem - 1px)) {
    .landing {
      overflow-x: hidden;
    }

    .landing__img {
      max-width: calc(100% + 2rem);
      height: auto;
    }

  }

  @media screen and (min-width: 62rem) {

    /*.coming-soon {*/

    /*}*/

    .landing.landing--coming-soon {
      background: var(--colors-background-primary) url('/theme/fortuna/img/system/coming-soon-1920x1024.webp') no-repeat top center/contain;
      display: block;
      aspect-ratio: 1920 / 1024;
      padding: 0;

      .landing__content {
        aspect-ratio: 1920 / 744;
        max-width: none;
        width: 100%;
        padding: var(--space-4);
        padding-inline-start: 5vw;
        justify-content: end;
        padding-block-end: 7vw;
        box-sizing: border-box;

        .landing__translation > * {
          width: 580px;
        }

      }

      .landing__languages {
        inset: auto 0 10vh 0;
      }

      .landing__img {
        display: none;
        opacity:.4;
        width: 100%;
        height: 100%;
      }


    }

    .landing__languages {
      :where(button) {
        background: var(--colors-background-primary);
        &.is-active {
          background: var(--colors-background-primary);
        }
      }
    }
  }
}