@layer reset, tokens, base, components;

@layer reset {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(body, h1, p) {
    margin: 0;
  }

  :where(img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
}

@layer tokens {
  :root {
    --color-surface: #FFFFFF;
    --color-text: #25262B;
    --font-display: "Source Serif 4", Georgia, serif;
    --font-body: "Manrope", Arial, sans-serif;
    --text-title: clamp(2rem, 1.54rem + 2.3vw, 3.75rem);
    --text-description: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
    --text-status: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    --page-gutter: clamp(1.5rem, 4vi, 4rem);
  }
}

@layer base {
  @font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
  }

  @font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
  }

  html {
    color-scheme: only light;
  }

  body {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-synthesis: none;
    line-height: 1.5;
  }
}

@layer components {
  .holding-page {
    display: grid;
    place-items: center;
    min-block-size: 100svh;
    padding-block: clamp(3rem, 8svh, 6rem);
    padding-inline: var(--page-gutter);
  }

  .holding-page__content {
    display: grid;
    justify-items: center;
    inline-size: 100%;
    max-inline-size: 68rem;
    min-inline-size: 0;
    text-align: center;
  }

  .holding-page__logo {
    inline-size: clamp(16rem, 44vw, 42.5rem);
    margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  }

  .holding-page__title {
    max-inline-size: 100%;
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: 700;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .holding-page__description {
    max-inline-size: 36ch;
    margin-block-start: clamp(1rem, 2vw, 1.75rem);
    font-size: var(--text-description);
    font-weight: 400;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  .holding-page__status {
    margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
    font-size: var(--text-status);
    font-weight: 500;
    overflow-wrap: anywhere;
  }
}