/*
 * Open Season Media illustration helpers.
 * Library-only utilities for future inline SVG placement.
 */

.osm-illustration {
  --osm-illustration-surface: var(--osm-color-soft-white);
  --osm-illustration-panel: var(--osm-color-surface);
  --osm-illustration-stroke: var(--osm-color-graphite);
  --osm-illustration-muted: var(--osm-color-stone-gray);
  --osm-illustration-accent: var(--osm-color-soft-copper);

  display: block;
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: min(100%, var(--osm-illustration-width, 32rem));
}

.osm-illustration--compact {
  --osm-illustration-width: 22rem;
}

.osm-illustration--wide {
  --osm-illustration-width: 42rem;
}

.osm-illustration--dark {
  --osm-illustration-surface: var(--osm-color-midnight-navy);
  --osm-illustration-panel: var(--osm-color-deep-navy);
  --osm-illustration-stroke: var(--osm-color-warm-ivory);
  --osm-illustration-muted: var(--osm-color-text-on-dark-muted);
  --osm-illustration-accent: var(--osm-color-champagne);
}

.osm-illustration--muted {
  --osm-illustration-surface: transparent;
  --osm-illustration-panel: rgb(var(--osm-rgb-warm-ivory) / 0.32);
  --osm-illustration-muted: var(--osm-color-morning-mist);
}

.osm-illustration-frame {
  align-items: center;
  display: grid;
  justify-items: center;
  min-width: 0;
}

.osm-illustration-frame--surface {
  background: var(--osm-color-surface);
  border: 1px solid var(--osm-color-border);
  border-radius: var(--osm-radius-lg);
  padding: clamp(1rem, 3vw, 2rem);
}

.osm-illustration-grid {
  display: grid;
  gap: var(--osm-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .osm-illustration,
  .osm-illustration * {
    transition: none !important;
  }
}