@layer gpgx-reset, gpgx-base, gpgx-layout, gpgx-parts, gpgx-adapt;

@layer gpgx-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  picture,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.12;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  :target {
    scroll-margin-block-start: 6rem;
  }

  :focus-visible {
    outline: 3px solid var(--gpgx-focus);
    outline-offset: 3px;
    border-radius: 6px;
  }
}

@layer gpgx-base {
  :root {
    --gpgx-berry-900: #3b0820;
    --gpgx-berry-800: #520d2d;
    --gpgx-berry-700: #6d113c;
    --gpgx-berry-600: #8a154d;
    --gpgx-raspberry: #b81f63;
    --gpgx-coral: #ff5b7f;
    --gpgx-coral-soft: #ff8aa3;
    --gpgx-pink: #ff3d77;
    --gpgx-cream: #fff5f0;
    --gpgx-card: #fffaf6;
    --gpgx-ink: #2c0a1a;
    --gpgx-ink-soft: #5b2740;
    --gpgx-lime: #b6f24a;
    --gpgx-lime-deep: #7cc41f;
    --gpgx-gold: #ffd24c;
    --gpgx-line: rgba(255, 240, 245, 0.16);

    --gpgx-bg: var(--gpgx-berry-800);
    --gpgx-bg-deep: var(--gpgx-berry-900);
    --gpgx-on-bg: #ffe9f0;
    --gpgx-on-bg-dim: #f3c6d6;
    --gpgx-on-card: var(--gpgx-ink);
    --gpgx-on-card-dim: var(--gpgx-ink-soft);
    --gpgx-accent: var(--gpgx-coral);
    --gpgx-accent-strong: var(--gpgx-pink);
    --gpgx-focus: var(--gpgx-lime);

    --gpgx-font-display: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
    --gpgx-font-body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gpgx-step-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    --gpgx-step-sm: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --gpgx-step-md: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
    --gpgx-step-lg: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    --gpgx-step-xl: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
    --gpgx-step-2xl: clamp(2.4rem, 1.6rem + 3.8vw, 4.4rem);

    --gpgx-gap-3xs: 0.35rem;
    --gpgx-gap-2xs: 0.6rem;
    --gpgx-gap-xs: 0.9rem;
    --gpgx-gap-sm: 1.25rem;
    --gpgx-gap-md: 1.85rem;
    --gpgx-gap-lg: 2.75rem;
    --gpgx-gap-xl: 4rem;
    --gpgx-gap-2xl: 6rem;

    --gpgx-round-sm: 10px;
    --gpgx-round-md: 18px;
    --gpgx-round-lg: 28px;
    --gpgx-round-xl: 40px;
    --gpgx-round-pill: 999px;

    --gpgx-shadow-soft: 0 10px 26px rgba(36, 4, 20, 0.28);
    --gpgx-shadow-card: 0 14px 38px rgba(36, 4, 20, 0.22);
    --gpgx-shadow-pop: 0 6px 0 rgba(120, 12, 56, 0.45);

    --gpgx-shell: min(1180px, 100% - 2.4rem);
    --gpgx-shell-wide: min(1360px, 100% - 2.4rem);

    --gpgx-speed-fast: 140ms;
    --gpgx-speed-mid: 260ms;
    --gpgx-speed-slow: 460ms;
    --gpgx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body {
    font-family: var(--gpgx-font-body);
    font-size: var(--gpgx-step-md);
    font-weight: 500;
    color: var(--gpgx-on-bg);
    background-color: var(--gpgx-bg-deep);
    background-image:
      radial-gradient(120% 80% at 12% -10%, rgba(255, 91, 127, 0.28), transparent 55%),
      radial-gradient(90% 70% at 95% 0%, rgba(184, 31, 99, 0.4), transparent 60%),
      linear-gradient(180deg, var(--gpgx-berry-800), var(--gpgx-berry-900));
    background-attachment: fixed;
  }

  strong,
  b {
    font-weight: 700;
  }

  .gpgx-display {
    font-family: var(--gpgx-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
}