/* ============================================================================
   UTILITIES — Layout helpers, containers (max-width: 90rem)
   ============================================================================ */

@layer utilities {
  .container {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: var(--space-6);
    }
  }
  @media (min-width: 1024px) {
    .container {
      padding-inline: var(--space-8);
    }
  }

  .container--narrow {
    max-width: 768px;
  }
  .container--wide {
    max-width: 1536px;
  }

  .section {
    padding-block: var(--space-16);
  }
  .section--sm {
    padding-block: var(--space-8);
  }
  .section--lg {
    padding-block: var(--space-24);
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* `flex-stack` (not `flex-col`) — avoids shadowing Tailwind's `.flex-col`
     utility, which would silently break responsive overrides like
     `flex-stack sm:flex-row` because the custom rule (loaded after
     tailwind.css) wins the cascade. Use this single class to get both
     `display: flex` and a column layout. */
  .flex-stack {
    display: flex;
    flex-direction: column;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  [data-observe~="stagger"] > * {
    transition-delay: calc(var(--stagger-index, 0) * 80ms);
  }

  .choreo-signature [data-line] {
    display: inline-block;
  }

  .choreo-delay-0 {
    --stagger-index: 0;
  }

  .choreo-delay-1 {
    --stagger-index: 1;
  }

  .choreo-delay-2 {
    --stagger-index: 2;
  }

  .choreo-delay-3 {
    --stagger-index: 3;
  }

  .choreo-delay-4 {
    --stagger-index: 4;
  }

  .choreo-delay-5 {
    --stagger-index: 5;
  }

  .choreo-delay-6 {
    --stagger-index: 6;
  }

  .choreo-delay-7 {
    --stagger-index: 7;
  }

  @media (prefers-reduced-motion: no-preference) {
    .choreo-reveal {
      opacity: 0;
      transform: translateY(16px);
      animation: choreo-rise var(--duration-signature) var(--ease-signature) both;
      animation-delay: calc(var(--stagger-index, 0) * 80ms);
    }

    .choreo-signature [data-line] {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.18em);
      animation: choreo-signature-rise var(--duration-signature)
        var(--ease-signature) both;
      animation-delay: calc(var(--stagger-index, 0) * 80ms);
    }
  }

  @keyframes choreo-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes choreo-signature-rise {
    from {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.18em);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .choreo-reveal,
    .choreo-signature [data-line] {
      opacity: 1;
      clip-path: none;
      transform: none;
      animation: none;
    }
  }

  /* Mark highlights — gradient underline emphasis */
  .mark-ylw {
    background: linear-gradient(
      104deg,
      transparent 0.9%,
      color-mix(in oklch, var(--ylw), transparent 70%) 2.4%,
      color-mix(in oklch, var(--ylw), transparent 50%) 5.8%,
      color-mix(in oklch, var(--ylw), transparent 85%) 93%,
      color-mix(in oklch, var(--ylw), transparent 60%) 96%,
      transparent 98%
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 2px;
  }
  .mark-red {
    background: linear-gradient(
      104deg,
      transparent 0.9%,
      color-mix(in oklch, var(--red), transparent 75%) 2.4%,
      color-mix(in oklch, var(--red), transparent 60%) 5.8%,
      color-mix(in oklch, var(--red), transparent 88%) 93%,
      color-mix(in oklch, var(--red), transparent 65%) 96%,
      transparent 98%
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 2px;
  }
  .mark-grn {
    background: linear-gradient(
      104deg,
      transparent 0.9%,
      color-mix(in oklch, var(--grn), transparent 75%) 2.4%,
      color-mix(in oklch, var(--grn), transparent 60%) 5.8%,
      color-mix(in oklch, var(--grn), transparent 88%) 93%,
      color-mix(in oklch, var(--grn), transparent 65%) 96%,
      transparent 98%
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 2px;
  }

  /* Shared typographic aliases for template migrations away from inline styles. */
  .ds-text-muted {
    color: var(--text-m);
  }

  .ds-text-foreground {
    color: var(--foreground);
  }

  .ds-text-positive {
    color: var(--grn-on-light);
  }

  .ds-text-danger {
    color: var(--red-on-light);
  }

  .ds-text-brand {
    color: var(--grn);
  }

  .ds-text-brand-dim {
    color: var(--grn);
    opacity: 0.7;
  }

  .ds-text-accent {
    color: var(--org-on-light);
  }

  .ds-text-cream {
    color: var(--cream);
  }

  .ds-text-cream-dim {
    color: var(--cream);
    opacity: 0.85;
  }

  .ds-display-heading {
    font-weight: 900;
    color: var(--foreground);
    letter-spacing: -0.02em;
  }

  .ds-display-strong {
    font-weight: 900;
    color: var(--foreground);
  }

  .ds-display-heading-inverse {
    font-weight: 900;
    color: var(--cream);
    letter-spacing: -0.02em;
  }

  .ds-display-subhead {
    font-weight: 800;
    color: var(--foreground);
    letter-spacing: -0.01em;
  }

  .ds-display-subhead-plain {
    font-weight: 800;
    color: var(--foreground);
  }

  .ds-display-subhead-inverse {
    font-weight: 800;
    color: var(--cream);
    letter-spacing: -0.01em;
  }

  .ds-body-muted {
    font-family: var(--font-body);
    color: var(--text-m);
  }

  .ds-body-foreground {
    font-family: var(--font-body);
    color: var(--foreground);
  }

  /* Callout rule — 1px structural separator on the leading edge of a
     paragraph-level callout. Spec-compliant: side-stripes greater than 1px
     used as a colored accent are banned (see DESIGN.md anti-patterns); this
     is a 1px structural border in the system's standard envelope color. */
  .ds-callout-rule {
    border-left: 1px solid var(--border);
  }

  .ds-bg-background {
    background: var(--background);
  }

  .ds-bg-darker {
    background: var(--darker);
  }

  .ds-bg-dark {
    background: var(--dark);
  }

  .ds-bg-card {
    background: var(--card);
  }

  .ds-bg-surface-dim {
    background: var(--surface-dim);
  }

  .ds-chip-muted {
    color: var(--text-m);
    background: var(--surface-dim);
  }

  .ds-divider {
    background: var(--border);
  }

  .ds-label-brand {
    color: var(--grn);
    border-color: var(--grn);
  }

  .ds-opacity-55 {
    opacity: 0.55;
  }

  .ds-icon-16-brand {
    width: 16px;
    height: 16px;
    color: var(--grn);
  }

  .ds-icon-16-muted {
    width: 16px;
    height: 16px;
    color: var(--text-m);
  }

  .ds-icon-14-accent {
    width: 14px;
    height: 14px;
    color: var(--hero-accent);
  }
}