/**
 * AMEPRES Tools V2 — scoped reset, typography and layout primitives.
 * All selectors are scoped with at2-* classes to protect the existing V1.
 */

@layer at2-reset, at2-base, at2-components, at2-utilities;

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

  .at2-scope {
    margin: 0;
    min-width: 20rem;
    min-height: 100%;
    background: var(--at2-bg);
    color: var(--at2-text);
    font-family: var(--at2-font-sans);
    font-size: 100%;
    line-height: var(--at2-leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .at2-scope :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
    margin-block-start: 0;
  }

  .at2-scope :where(img, svg, video) {
    display: block;
    max-width: 100%;
  }

  .at2-scope :where(button, input, select, textarea) {
    font: inherit;
  }

  .at2-scope :where(button, a) {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer at2-base {
  html:has(.at2-scope) {
    scroll-behavior: smooth;
    background: var(--at2-bg);
  }

  .at2-scope {
    position: relative;
    overflow-x: clip;
    background:
      radial-gradient(circle at 18% -10%, rgba(79, 120, 244, 0.15), transparent 34rem),
      radial-gradient(circle at 92% 12%, rgba(66, 212, 229, 0.09), transparent 27rem),
      linear-gradient(180deg, var(--at2-ink-900) 0, var(--at2-ink-950) 42rem);
  }

  .at2-scope::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.22;
    background-image:
      linear-gradient(rgba(180, 198, 197, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(180, 198, 197, 0.025) 1px, transparent 1px);
    background-size: 3rem 3rem;
    mask-image: linear-gradient(to bottom, black, transparent 70%);
  }

  .at2-scope a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  .at2-scope :focus-visible {
    outline: 3px solid var(--at2-focus);
    outline-offset: 4px;
    border-radius: max(0.2rem, var(--at2-radius-sm));
  }

  .at2-scope ::selection {
    background: var(--at2-primary);
    color: var(--at2-on-primary);
  }

  .at2-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .at2-main {
    flex: 1 0 auto;
  }

  .at2-container {
    width: min(calc(100% - (2 * var(--at2-gutter))), var(--at2-content-wide));
    margin-inline: auto;
  }

  .at2-reading-width {
    width: min(100%, var(--at2-content-reading));
  }

  .at2-section {
    padding-block: var(--at2-section-space);
    scroll-margin-top: 7rem;
  }

  .at2-section--compact {
    padding-block: clamp(3rem, 5vw, 5rem);
  }

  .at2-section--ruled {
    border-block: 1px solid var(--at2-line);
    background: rgba(7, 17, 25, 0.62);
  }

  .at2-stack {
    display: flex;
    flex-direction: column;
    gap: var(--at2-space-6);
  }

  .at2-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--at2-space-3);
  }

  .at2-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--at2-grid-gap);
  }

  .at2-grid > * {
    grid-column: span 12;
  }

  .at2-eyebrow {
    margin: 0 0 var(--at2-space-4);
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: var(--at2-step--1);
    font-weight: 650;
    letter-spacing: var(--at2-tracking-wide);
    line-height: 1.4;
    text-transform: uppercase;
  }

  .at2-display,
  .at2-heading,
  .at2-card-title {
    margin-block-end: var(--at2-space-5);
    color: var(--at2-text);
    font-weight: 660;
    letter-spacing: var(--at2-tracking-tight);
    text-wrap: balance;
  }

  .at2-display {
    max-width: 13ch;
    font-size: var(--at2-step-4);
    line-height: var(--at2-leading-tight);
  }

  .at2-display em,
  .at2-heading em {
    color: var(--at2-accent);
    font-family: var(--at2-font-editorial);
    font-weight: 500;
  }

  .at2-heading {
    max-width: 22ch;
    font-size: var(--at2-step-3);
    line-height: var(--at2-leading-heading);
  }

  .at2-card-title {
    font-size: var(--at2-step-1);
    line-height: 1.25;
  }

  .at2-lead {
    max-width: 62ch;
    color: var(--at2-text-soft);
    font-size: var(--at2-step-1);
    line-height: 1.55;
  }

  .at2-copy {
    max-width: 68ch;
    color: var(--at2-text-soft);
    font-size: var(--at2-step-0);
  }

  .at2-muted {
    color: var(--at2-text-dim);
  }

  .at2-mono {
    font-family: var(--at2-font-mono);
  }

  .at2-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Spezifitaet bewusst ueber `.at2-scope a { color: inherit }` — sonst erbt der
     Sprunglink die helle Textfarbe und steht weiss auf Cyan (Kontrast 1,65, BUG-010).
     @since FS2 v0.51.8 */
  .at2-scope .at2-skip-link {
    position: fixed;
    z-index: 1000;
    inset: var(--at2-space-3) auto auto var(--at2-space-3);
    transform: translateY(-180%);
    padding: var(--at2-space-3) var(--at2-space-4);
    border-radius: var(--at2-radius-sm);
    background: var(--at2-primary);
    color: var(--at2-on-primary);
    font-weight: 700;
    transition: transform var(--at2-duration-fast) var(--at2-ease-standard);
  }

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

@layer at2-utilities {
  .at2-span-4 { grid-column: span 4; }
  .at2-span-5 { grid-column: span 5; }
  .at2-span-6 { grid-column: span 6; }
  .at2-span-7 { grid-column: span 7; }
  .at2-span-8 { grid-column: span 8; }
  .at2-span-12 { grid-column: span 12; }

  @media (max-width: 68rem) {
    .at2-span-4,
    .at2-span-5,
    .at2-span-6,
    .at2-span-7,
    .at2-span-8 {
      grid-column: span 6;
    }
  }

  @media (max-width: 48rem) {
    .at2-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .at2-grid > *,
    .at2-span-4,
    .at2-span-5,
    .at2-span-6,
    .at2-span-7,
    .at2-span-8,
    .at2-span-12 {
      grid-column: 1;
    }

    .at2-section {
      padding-block: clamp(3.5rem, 12vw, 5.5rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html:has(.at2-scope) {
      scroll-behavior: auto;
    }

    .at2-scope *,
    .at2-scope *::before,
    .at2-scope *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}