/* Aiory base: reset, webfont, element defaults, focus ring, scrollbars, selection, .sr-only.
   Only semantic tokens (tokens.css). Motion is reduced through the duration tokens, so no
   component needs its own prefers-reduced-motion rule for transitions. */

@layer reset, tokens, base, layout, components, apps, utilities;

/* Manrope, served from the local mirror (GDPR: no third-party font requests). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/google/06-xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F.woff2) format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/google/07-xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.woff2) format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/google/08-xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE-_F.woff2) format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/google/09-xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.woff2) format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/google/10-xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F.woff2) format("woff2");
}

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ol, ul,
  fieldset, legend {
    margin: 0;
  }

  ol[role="list"],
  ul[role="list"] {
    padding: 0;
    list-style: none;
  }

  fieldset {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  legend {
    padding: 0;
  }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  svg {
    flex-shrink: 0;
  }

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

  button {
    cursor: pointer;
  }

  textarea {
    resize: vertical;
  }

  table {
    border-collapse: collapse;
  }

  /* The hidden attribute always hides, whatever display a component sets. */
  [hidden] {
    display: none !important;
  }
}

@layer base {
  html {
    background: var(--color-bg-app);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    accent-color: var(--color-accent);
    scrollbar-color: var(--color-scrollbar) transparent;
  }

  body {
    min-height: 100dvh;
    background: var(--color-bg-app);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }
  h5, h6 { font-size: var(--font-size-base); }

  p {
    text-wrap: pretty;
  }

  small {
    font-size: var(--font-size-sm);
  }

  strong, b {
    font-weight: var(--font-weight-bold);
  }

  a {
    color: var(--color-text-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--color-accent-border);
    transition: color var(--duration-fast) var(--ease-standard),
      text-decoration-color var(--duration-fast) var(--ease-standard);
  }

  a:hover {
    text-decoration-color: currentColor;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  code, kbd {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-hover);
  }

  pre {
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--color-bg-inset);
  }

  /* Code inside a block is one box: the inline chip look of `code` would paint a background per line. */
  pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
  }

  hr {
    height: 0;
    margin: var(--space-4) 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-divider);
  }

  ::selection {
    background: var(--color-selection);
  }

  ::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
  }

  /* One focus ring for everything; components may move it inside (outline-offset). */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-scrollbar);
    background-clip: padding-box;
  }

  /* Icons from Aiory.ui.icons: size comes from the width/height attributes. */
  .ui-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
  }

  /* Visually hidden, still announced by screen readers. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Shared keyframes (names are global; components reference them). */
  @keyframes ui-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes ui-fade-in {
    from { opacity: 0; }
  }

  @keyframes ui-rise-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
  }

  @keyframes ui-slide-up {
    from { transform: translateY(100%); }
  }

  @keyframes ui-slide-in-side {
    from { transform: translateX(100%); }
  }

  @keyframes ui-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
  }

  @keyframes ui-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}