/* Tokens come from miles.css, a copy of the Miles brand kit's tokens/miles.css. Component styles
   written with css() land in the rmx layer and override the defaults in base. */
@layer base, rmx, app;

:root {
  /* The page headline runs from the theme's xl step on a phone to xxl on a wide screen. */
  --size-display: clamp(var(--size-xl), 1.885rem + 1.62vw, var(--size-xxl));
  --line-display: calc(var(--size-display) + var(--space-xxs));
  --page-gutter: clamp(var(--space-m), 0.5rem + 3vw, var(--space-xxl));
  --space-section: clamp(var(--space-xxl), 1.5rem + 6vw, calc(var(--space-xxl) * 2));
  /* The bottom navigation on an event's pages, and the part of the phone it keeps clear of. */
  --tabbar-block: calc(4rem + env(safe-area-inset-bottom));
  --topbar-block: 3.5rem;
  /* How wide an event's pages are: a phone's width, a little more on a large screen. */
  --column: 42rem;
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  :root {
    color-scheme: light;
    scrollbar-gutter: stable;
    text-wrap: pretty;
    overflow-wrap: break-word;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--miles-cream);
    color: var(--miles-burgundy);
    font-family: var(--font-ui);
    font-weight: var(--weight-ui-regular);
    font-size: var(--size-m);
    line-height: var(--line-m);
    letter-spacing: var(--letter-spacing-m);
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-family: var(--font-brand);
    font-weight: var(--weight-brand-regular);
    text-wrap: balance;
  }

  p,
  dl,
  dd {
    margin: 0;
  }

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

  input,
  textarea,
  select {
    font-size: max(16px, 1rem);
  }

  button,
  a,
  [role='button'] {
    touch-action: manipulation;
  }

  button,
  [role='button'] {
    user-select: none;
    -webkit-user-select: none;
  }

  :focus-visible {
    outline: 3px solid var(--cte-focus);
    outline-offset: 3px;
  }
}

@layer base {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* A program point or a place the page links to by its id stays clear of the top bar. */
  [id] {
    scroll-margin-block-start: calc(var(--topbar-block) + var(--space-m));
  }
}