/* 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));
}

@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;
  }
}

/* The places in a lesson's text that comments on the page are about. Painted by
   app/actions/courses/public/comment-form.tsx without changing the text itself. */
::highlight(kommentar) {
  background-color: var(--miles-yellow);
  color: inherit;
}

/* The place whose comment the pointer or the focus is on. */
::highlight(kommentar-aktiv) {
  background-color: var(--miles-burgundy);
  color: var(--miles-cream);
}