/**
 * Modern Natural product surface contract. Visual skin only.
 * Extends the existing al-card vocabulary without loading the lab's layout,
 * typography, glass or global token defaults. Legacy consumers remain opt-in.
 * Product owners retain all spacing, dimensions, media ratios and behavior.
 */
:root {
  --al-surface-page: #f4f6f7;
  --al-surface-card: #ffffff;
  --al-surface-subtle: #f4f6f7;
  --al-surface-information: #edf1f2;
  --al-surface-warning: #fff7e8;
  --al-surface-elevated: #ffffff;
  --al-surface-selected: #edf6f0;
  --al-surface-premium: #183f2d;
  /* Explicit exceptions: premium and achievement states only. Restored from
     the achievement owner's original warm/cool palette; ordinary cards stay flat. */
  --al-surface-premium-gradient: linear-gradient(120deg, #102e22 0%, #183f2d 55%, #2c6b4a 100%);
  --al-surface-achievement-complete: radial-gradient(circle at top right, color-mix(in srgb, #d97706 10%, transparent), transparent 42%), linear-gradient(180deg, #ffffff, color-mix(in srgb, #d97706 12%, #ffffff));
  --al-surface-achievement-progress: radial-gradient(circle at top right, color-mix(in srgb, #5ca892 11%, transparent), transparent 42%), linear-gradient(180deg, #ffffff, color-mix(in srgb, #5ca892 13%, #ffffff));
  --al-surface-ink: #14231c;
  --al-surface-ink-muted: #52645b;
  --al-surface-inverse: #ffffff;
  --al-surface-border: #dee5e2;
  --al-surface-border-defined: #c4cfc9;
  --al-surface-border-empty: #7d8e84;
  --al-surface-border-warning: #a8772b;
  --al-surface-border-hover: #416a78;
  --al-surface-border-selected: #2c6b4a;
  --al-surface-shadow-none: none;
  --al-surface-shadow-floating: 0 4px 12px rgb(20 35 28 / 6%);
  --al-surface-radius-compact: 6px;
  --al-surface-radius-card: 8px;
  --al-surface-radius-panel: 10px;
}

/* Explicit adoption; never restyle legacy .al-card consumers implicitly. */
.al-card.al-card--natural {
  --al-card-bg: var(--al-surface-card);
  --al-card-border: var(--al-surface-border);
  --al-card-radius: var(--al-surface-radius-card);
  background: var(--al-card-bg);
  color: var(--al-surface-ink);
  border: 1px solid var(--al-card-border);
  border-radius: var(--al-card-radius);
  box-shadow: var(--al-surface-shadow-none);
}
.al-card--natural.al-card--compact { --al-card-radius: var(--al-surface-radius-compact); }
.al-card--natural.al-card--application { --al-card-radius: var(--al-surface-radius-panel); }
.al-card--natural.al-card--subtle { --al-card-bg: var(--al-surface-subtle); }
.al-card--natural.al-card--information {
  --al-card-bg: var(--al-surface-information);
  --al-card-border: var(--al-surface-border-defined);
}
.al-card--natural.al-card--warning {
  --al-card-bg: var(--al-surface-warning);
  --al-card-border: var(--al-surface-border-warning);
}
.al-card--natural.al-card--defined { --al-card-border: var(--al-surface-border-defined); }
.al-card--natural.al-card--selected {
  --al-card-bg: var(--al-surface-selected);
  --al-card-border: var(--al-surface-border-selected);
}
.al-card--natural.al-card--premium {
  --al-card-bg: var(--al-surface-premium-gradient);
  --al-card-border: var(--al-surface-premium);
  color: var(--al-surface-inverse);
}
.al-card--natural.al-card--floating {
  --al-card-bg: var(--al-surface-elevated);
  box-shadow: var(--al-surface-shadow-floating);
}
/* Image-led and empty are semantic composition roles; no mandated crop/size. */
.al-card--natural.al-card--empty {
  --al-card-border: var(--al-surface-border-empty);
  border-style: dashed;
}
.al-card--natural.al-card--disabled { --al-card-bg: var(--al-surface-subtle); }
.al-card--natural.al-card--interactive:not(.al-card--disabled):not([aria-disabled="true"]):hover {
  border-color: var(--al-surface-border-hover);
}
.al-card--natural.al-card--interactive:focus-visible,
.al-card--natural.al-card--interactive:has(:focus-visible) {
  outline: 2px solid var(--al-surface-border-hover);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .al-card--natural.al-card--selected { border-color: Highlight; }
}

/* Explicit full-card interaction. The component supplies the real link or
   button and its behavior. Independent controls remain sibling actions.
   A direct-child primary avoids clipped pseudo-links inside media/headings. */
.al-card--destination { position: relative; isolation: isolate; }
.al-card--destination > .al-card__primary {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
}
.al-card--destination > .al-card__primary:focus-visible { outline: none; }
.al-card--destination:has(> .al-card__primary:hover),
.al-card--destination:has(> .al-card__primary:active) {
  border-color: var(--al-surface-border-hover);
}
.al-card--destination:has(> .al-card__primary:focus-visible) {
  outline: 2px solid var(--al-surface-border-hover);
  outline-offset: 3px;
}
/* The owner may keep absolute positioning (e.g. photo-overlay bookmarks).
   Mark only the independent control, never the entire content region. */
.al-card--destination .al-card__action { position: relative; z-index: 4; }
.al-card--destination .al-card__action--overlay { position: absolute; }
.al-card--destination[aria-disabled="true"] > .al-card__primary { pointer-events: none; cursor: default; }
@media (forced-colors: active) {
  .al-card--destination:has(> .al-card__primary:focus-visible) { outline-color: Highlight; }
}