@layer tokens, base, components, utilities;

@import "tokens.css" layer(tokens);
@import "base.css" layer(base);

@import "components/header.css" layer(components);
@import "components/hero.css" layer(components);
@import "components/features.css" layer(components);
@import "components/notes.css" layer(components);
@import "components/topics.css" layer(components);
@import "components/atmosphere.css" layer(components);
@import "components/partners.css" layer(components);
@import "components/schedule.css" layer(components);
@import "components/register.css" layer(components);

@import "breakpoints.css";

@layer utilities {
  .container {
    width: min(100% - var(--container-pad) * 2, var(--container-max));
    margin-inline: auto;
  }

  .marker-highlight {
    position: relative;
    display: inline-block;
    padding: 0 10px;
  }

  .marker-highlight::before {
    content: "";
    position: absolute;
    inset: 0.25em -8px 0.1125em;
    z-index: -1;
    background: url("../images/bg-marker-highlight.webp") center / 100% 100% no-repeat;
    transform: rotate(-2deg);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--duration-marker) var(--ease-marker);
  }

  .marker-highlight--drawn::before {
    clip-path: inset(0 0 0 0);
  }

  @media (scripting: none), (prefers-reduced-motion: reduce) {
    .marker-highlight::before {
      clip-path: inset(0 0 0 0);
      transition: none;
    }
  }

  .badge-yellow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 17px;
    background: var(--color-yellow-primary);
    border: 3px solid var(--color-white);
    border-radius: 16px;
    font-family: var(--font-primary);
    font-size: var(--text-card);
    line-height: 1.14;
    color: var(--color-dark-1);
    white-space: nowrap;
  }
}