/** Surface contract: border-first, flat by default. */

.al-surface-base,
.al-surface-subtle,
.al-surface-raised,
.al-surface-floating,
.al-surface-inset,
.al-surface-glass,
.al-card {
  --al-context-text: var(--al-color-text-ink);
  --al-context-muted: var(--al-color-text-muted);
  --al-context-soft: var(--al-color-text-soft);
  --al-context-accent: var(--al-color-moss);
  --al-context-focus: var(--al-color-focus-light);
  --al-context-outline-border: var(--al-color-border-strong);
  --al-context-outline-bg: transparent;
}

.al-surface-base { background: var(--al-color-surface-page); color: var(--al-context-text); }
.al-surface-subtle { background: var(--al-color-surface-subtle); color: var(--al-context-text); border: 1px solid var(--al-color-border-soft); }
.al-surface-raised { background: var(--al-color-surface-card); color: var(--al-context-text); border: 1px solid var(--al-color-border-default); box-shadow: none; }
.al-surface-floating { background: var(--al-color-surface-raised); color: var(--al-context-text); border: 1px solid var(--al-color-border-default); box-shadow: var(--al-shadow-subtle); }
.al-surface-inset { background: rgba(var(--al-color-moss-rgb), .035); color: var(--al-context-text); border: 1px solid var(--al-color-border-soft); box-shadow: none; }

.al-surface-hero {
  --al-context-text: var(--al-color-text-inverse);
  --al-context-muted: rgba(255, 255, 255, .82);
  --al-context-soft: rgba(255, 255, 255, .74);
  --al-context-accent: var(--al-color-soft-aqua);
  --al-context-focus: var(--al-color-focus-dark);
  --al-context-outline-border: rgba(var(--al-color-soft-aqua-rgb), .42);
  --al-context-outline-bg: rgba(255, 255, 255, .025);
  background: radial-gradient(90% 100% at 100% 0%, rgba(var(--al-color-river-blue-rgb), .22), transparent 58%), linear-gradient(145deg, #102f22, var(--al-color-deep-moss));
  color: var(--al-context-text);
  border: 1px solid rgba(var(--al-color-soft-aqua-rgb), .28);
  box-shadow: none;
}

.al-surface-glass { background: var(--al-color-surface-glass); color: var(--al-context-text); border: 1px solid rgba(255, 255, 255, .42); box-shadow: none; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }

/* Compatibility utilities retain their names without recreating an elevation ladder. */
.al-elevation-0, .al-elevation-1, .al-elevation-2, .al-elevation-3 { box-shadow: none; }
.al-elevation-overlay { box-shadow: var(--al-shadow-subtle); }
.al-surface-border-soft { border: 1px solid var(--al-color-border-soft); }
.al-surface-border-default { border: 1px solid var(--al-color-border-default); }
.al-surface-border-strong { border: 1px solid var(--al-color-border-strong); }
.al-surface-border-inverse { border: 1px solid rgba(var(--al-color-soft-aqua-rgb), .36); }

.al-glass-soft, .al-glass-default, .al-glass-strong { border: 1px solid rgba(255, 255, 255, .42); box-shadow: none; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.al-glass-soft { background: rgba(255, 255, 255, .72); }
.al-glass-default { background: rgba(255, 255, 255, .82); }
.al-glass-strong { background: rgba(255, 255, 255, .90); }
.al-glass-inverse { background: rgba(var(--al-color-deep-moss-rgb), .58); border: 1px solid rgba(var(--al-color-soft-aqua-rgb), .28); color: var(--al-color-text-inverse); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }

.al-overlay-tint { background: rgba(var(--al-color-deep-moss-rgb), .46); }
.al-overlay-soft { background: radial-gradient(90% 70% at 50% 0%, rgba(var(--al-color-river-blue-rgb), .16), transparent 62%), rgba(var(--al-color-deep-moss-rgb), .38); }
.al-overlay-strong { background: rgba(13, 31, 23, .68); }

.al-shell-page { inline-size: min(100% - var(--al-space-32), var(--al-page-shell-max-width)); margin-inline: auto; }
.al-shell-wide { inline-size: min(100% - var(--al-space-32), 1380px); margin-inline: auto; }
.al-shell-narrow { inline-size: min(100% - var(--al-space-32), 860px); margin-inline: auto; }
.al-shell-section { padding-block: var(--al-section-spacing-default); }
.al-shell-section-compact { padding-block: var(--al-section-spacing-small); }
.al-shell-section-spacious { padding-block: var(--al-section-spacing-large); }

@media (max-width: 640px) {
  .al-shell-page, .al-shell-wide, .al-shell-narrow { inline-size: min(100% - var(--al-space-24), var(--al-page-shell-max-width)); }
  .al-shell-section { padding-block: var(--al-space-48); }
  .al-shell-section-compact { padding-block: var(--al-space-32); }
  .al-shell-section-spacious { padding-block: var(--al-space-64); }
}