/* Base Styles - Reset & Normalize */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  :where(body) {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    line-height: var(--sccx-leading-normal);
    font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
    font-size: var(--sccx-text-base);
    font-weight: var(--sccx-weight-normal);
    color: var(--sccx-text);
    background-color: var(--sccx-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  :where(h1) {
    font-size: var(--sccx-text-4xl);
  }
  :where(h2) {
    font-size: var(--sccx-text-3xl);
  }
  :where(h3) {
    font-size: var(--sccx-text-2xl);
  }
  :where(h4) {
    font-size: var(--sccx-text-xl);
  }
  :where(h5) {
    font-size: var(--sccx-text-lg);
  }
  :where(h6) {
    font-size: var(--sccx-text-base);
  }

  :where(p, li, figcaption) {
    max-inline-size: 65ch;
    text-wrap: pretty;
  }

  :where(a) {
    color: var(--sccx-primary);
    text-decoration-skip-ink: auto;
  }

  :where(a:hover) {
    color: var(--sccx-primary-hover);
  }

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

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

  :where(button, [role="button"]) {
    cursor: pointer;
  }

  :where(button:disabled, [role="button"]:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
  }

  :where(textarea) {
    resize: vertical;
  }

  :where(:focus-visible) {
    outline: 2px solid var(--sccx-primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  .sccx-skip-link {
    position: absolute;
    inset-block-start: var(--sccx-space-s);
    inset-inline-start: var(--sccx-space-s);
    padding: var(--sccx-space-xs) var(--sccx-space-s);
    background: var(--sccx-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--sccx-radius-md);
    z-index: var(--sccx-z-tooltip);
    transform: translateY(-200%);
    transition: transform var(--sccx-transition-fast);
  }

  .sccx-skip-link:focus {
    transform: translateY(0);
  }

  .sccx-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}