@layer base, components, utilities;

@layer base {
  @layer fonts {
    /* noto-sans-regular - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 400;
      src: url('../assets/fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* noto-sans-500 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 500;
      src: url('../assets/fonts/noto-sans-v42-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* noto-sans-600 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 600;
      src: url('../assets/fonts/noto-sans-v42-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* noto-sans-700 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 700;
      src: url('../assets/fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
  }

  :root {
    /* Neutral Colors */
    --c-neutral-100: hsl(0 0% 100%);
    --c-neutral-200: hsl(210, 20%, 98%);
    --c-neutral-400: hsl(213, 11%, 84%);
    --c-neutral-600: hsl(0, 0%, 32%);
    --c-neutral-900: hsl(0 0% 9%);
    --c-indigo-50: hsl(226, 100%, 97%);
    --c-indigo-200: hsl(237, 76%, 95%);
    --c-indigo-500: hsl(239, 84%, 67%);
    --c-indigo-600: hsl(243, 75%, 59%);
    --c-indigo-700: hsl(245, 58%, 51%);
    --c-indigo-800: hsl(244, 55%, 41%);

    --color-text-base: var(--c-neutral-600);
    --color-text-light: var(--c-neutral-100);
    --color-text-dark: var(--c-neutral-900);

    --color-light-bg: var(--c-neutral-100);
    --color-button-bg: var(--c-neutral-100);
    --color-button-dark-bg: var(--c-indigo-700);
    --color-button-dark-bg-hover: var(--c-indigo-800);
    --color-section-bg: var(--c-neutral-100);

    --color-body-bg: linear-gradient(to bottom, var(--c-neutral-200), var(--c-neutral-400));

    /* Font Sizes */
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-30: calc(30 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-60: calc(60 / 16 * 1rem);

    --font-size-small: var(--fs-14);
    --font-size-base: var(--fs-18);
    --font-size-h1: var(--fs-36);
    --font-size-h2: var(--fs-36);
    --font-size-subtitle: var(--fs-18);
    --font-size-ribbon: var(--fs-16);
    --font-size-button: var(--fs-16);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-base: var(--fs-20);
      --font-size-h2: var(--fs-48);
      --font-size-subtitle: var(--fs-20);
      --font-size-button: var(--fs-18);
    }

    @media (width >= calc(1200 / 16 * 1rem)) {
      --font-size-h1: var(--fs-60);
      --font-size-h2: var(--fs-60);
    }
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    background: var(--color-body-bg);
    color: var(--color-text-base);
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
    min-height: 100dvh;
    padding-block: calc(16 / 16 * 1rem);
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    border: none;
  }

  h1,
  h2,
  h3 {
    font-weight: 600;
  }

  h1 {
    color: var(--color-text-dark);
    font-size: var(--font-size-h1);
    font-weight: 500;
    line-height: 1.1;
  }

  h2 {
    font-size: var(--font-size-h2);
    line-height: 1;
    font-weight: 600;
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  .wrapper {
    width: min(calc(100% - 32px), calc(1250 / 16 * 1rem));
    margin-inline: auto;
  }
}

@layer components {
  .hero {
    background-image: url('../assets/images/mobile-bg-2x.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    margin-inline: calc(16 / 16 * 1rem);
    padding-block: calc(166 / 16 * 1rem);

    @media (width >= calc(600 / 16 * 1rem)) {
      background-image: url('../assets/images/tablet-bg-2x.png');
      padding-block: calc(302 / 16 * 1rem);
    }

    @media (width >= calc(1000 / 16 * 1rem)) {
      background-image: url('../assets/images/desktop-bg-2x.png');
      padding-block: calc(168 / 16 * 1rem);
    }

    .hero__content {
      padding-block: calc(48 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        padding-block: calc(64 / 16 * 1rem);
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: calc(32 / 16 * 1rem);
      }
    }

    .hero__text {
      @media (width >= calc(800 / 16 * 1rem)) {
        grid-column: span 7;
        align-content: center;
        margin-block-end: 0;
      }
    }
    .hero__ribbon {
      color: var(--c-indigo-700);
      font-size: var(--font-size-ribbon);
      font-weight: 600;
    }

    .hero__title {
      color: var(--color-text-dark);
      line-height: 1.2;
      margin-block: calc(8 / 16 * 1rem) calc(20 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block: calc(12 / 16 * 1rem) calc(24 / 16 * 1rem);
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        margin-block: calc(6 / 16 * 1rem) calc(16 / 16 * 1rem);
      }
    }

    .hero__subtitle {
      font-size: var(--font-size-subtitle);
      margin-block-end: calc(32 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-end: calc(64 / 16 * 1rem);
      }
    }

    .hero__btn {
    }

    .btn {
      display: inline-block;
      background-color: var(--color-button-dark-bg);
      color: var(--color-text-light);
      padding: calc(12 / 16 * 1rem) calc(20 / 16 * 1rem);
      border-radius: 4px;
      text-decoration: none;
      text-align: center;
      font-weight: 500;
      font-size: var(--font-size-button);
      transition: background-color 0.3s ease;
      width: 100%;

      @media (width >= calc(600 / 16 * 1rem)) {
        width: fit-content;
      }

      @media (width >= calc(1200 / 16 * 1rem)) {
        padding: calc(16 / 16 * 1rem) calc(24 / 16 * 1rem);
      }

      &:hover {
        background-color: var(--color-button-dark-bg-hover);
        color: var(--color-light-bg);
      }
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background-color: #fff;
      padding: 10px;
      border: 1px solid;
    }
  }
}