/**
 * WedHues Studio OS v8 design tokens — authoritative application layer.
 * Palette: ivory, espresso, charcoal, gold, terracotta, blush, sand, white.
 * Space: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
 * Widths: reading 760, content 1120, app 1280, operations 1480px.
 * Geometry: 44px minimum target; 2px small and 4px standard radii.
 * All names use the --wh-os- prefix so loading this route-scoped stylesheet
 * cannot alter existing public, gallery, film, or Album Studio variables.
 */
:root {
  --wh-os-ivory: #faf7f2;
  --wh-os-espresso: #2a1f1a;
  --wh-os-charcoal: #1c1c1c;
  --wh-os-gold: #b8924a;
  --wh-os-terracotta: #9d472f;
  --wh-os-blush: #e8d5c8;
  --wh-os-sand: #d9cfc1;
  --wh-os-white: #ffffff;
  --wh-os-stone: #685f59;
  --wh-os-muted: #756b64;
  --wh-os-border: #d8d0c7;
  --wh-os-info: #315f75;
  --wh-os-success: #2f6b4f;
  --wh-os-warning: #81551d;
  --wh-os-danger: #a4362c;
  --wh-os-danger-soft: #f8e7e3;
  --wh-os-success-soft: #e5f0ea;
  --wh-os-warning-soft: #f7eddb;
  --wh-os-info-soft: #e6eff3;
  --wh-os-font-display: "Cormorant Garamond", Georgia, serif;
  --wh-os-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wh-os-font-accent: "Playfair Display", Georgia, serif;
  --wh-os-space-1: 4px;
  --wh-os-space-2: 8px;
  --wh-os-space-3: 12px;
  --wh-os-space-4: 16px;
  --wh-os-space-5: 24px;
  --wh-os-space-6: 32px;
  --wh-os-space-7: 48px;
  --wh-os-space-8: 64px;
  --wh-os-space-9: 96px;
  --wh-os-reading: 760px;
  --wh-os-content: 1120px;
  --wh-os-app: 1280px;
  --wh-os-board: 1480px;
  --wh-os-target: 44px;
  --wh-os-radius-small: 2px;
  --wh-os-radius: 4px;
  --wh-os-radius-panel: 8px;
  --wh-os-shadow-subtle: 0 1px 2px rgba(42, 31, 26, 0.08);
  --wh-os-shadow-panel: 0 14px 40px rgba(42, 31, 26, 0.12);
  --wh-os-focus: 0 0 0 3px rgba(157, 71, 47, 0.32);
  --wh-os-motion-fast: 140ms ease;
  --wh-os-motion: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --wh-os-z-nav: 40;
  --wh-os-z-overlay: 1000;
  --wh-os-z-toast: 1100;
}

.wh-os {
  color: var(--wh-os-charcoal);
  font-family: var(--wh-os-font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wh-os,
.wh-os *,
.wh-os *::before,
.wh-os *::after {
  box-sizing: border-box;
}

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

.wh-os :where(h1, h2, h3, h4) {
  color: var(--wh-os-espresso);
  font-family: var(--wh-os-font-display);
  font-weight: 500;
  line-height: 1.14;
  text-wrap: balance;
}

.wh-os h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
.wh-os h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.wh-os h3 { font-size: clamp(1.125rem, 2vw, 1.45rem); }
.wh-os h4 { font-size: 1rem; }

.wh-os :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  border-radius: var(--wh-os-radius-small);
  outline: 2px solid var(--wh-os-terracotta);
  outline-offset: 3px;
  box-shadow: var(--wh-os-focus);
}

.wh-os :where(img, video, svg) {
  max-width: 100%;
}

.wh-os-icon {
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.2em;
}

.wh-os-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;
}

@media (prefers-reduced-motion: reduce) {
  .wh-os,
  .wh-os *,
  .wh-os *::before,
  .wh-os *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}