/* ============================================================
   WAVE Archive — Research Surface Background System
   Opt-in utilities for content-heavy research pages.
   ============================================================ */

.wave-research-canvas {
  --wave-research-canvas-bg: var(--bg-page);
  --wave-research-grid-line-y: rgba(64, 54, 39, .020);
  --wave-research-grid-line-x: rgba(64, 54, 39, .014);
  --wave-research-grid-size: 42px;
  --wave-research-ambient-a: rgba(155, 115, 50, .038);
  --wave-research-ambient-b: rgba(64, 54, 39, .012);
  --wave-research-surface-bg: rgba(244, 240, 232, .82);
  --wave-research-surface-strong-bg: rgba(248, 244, 235, .92);
  --wave-research-zone-bg: rgba(255, 253, 247, .50);
  --wave-research-control-bg: rgba(246, 242, 234, .46);
  --wave-research-border: rgba(60, 52, 40, .14);
  --wave-research-border-strong: rgba(60, 52, 40, .22);
  --wave-research-text-primary: var(--color-text-primary);
  --wave-research-text-secondary: var(--color-text-secondary);
  --wave-research-text-tertiary: rgba(87, 84, 76, .60);
  --wave-research-accent: #9b7332;
  --wave-research-accent-soft: rgba(155, 115, 50, .12);
  --wave-research-shadow: 0 18px 46px rgba(49, 41, 30, .07);
  position: relative;
  isolation: isolate;
}

.wave-research-canvas::before,
.wave-research-canvas::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.wave-research-canvas::before {
  z-index: -2;
  background:
    linear-gradient(var(--wave-research-grid-line-y) 1px, transparent 1px),
    linear-gradient(90deg, var(--wave-research-grid-line-x) 1px, transparent 1px),
    var(--wave-research-canvas-bg);
  background-size:
    var(--wave-research-grid-size) var(--wave-research-grid-size),
    var(--wave-research-grid-size) var(--wave-research-grid-size),
    auto;
}

.wave-research-canvas::after {
  z-index: -1;
  background:
    radial-gradient(circle at 18% 6%, var(--wave-research-ambient-a), transparent 31%),
    radial-gradient(circle at 88% 12%, var(--wave-research-ambient-b), transparent 30%),
    linear-gradient(180deg, rgba(242, 239, 230, .18), rgba(242, 239, 230, .02) 48%, rgba(242, 239, 230, .16));
}

.wave-research-surface,
.wave-research-surface-strong,
.wave-research-zone {
  border-color: var(--wave-research-border);
}

.wave-research-surface {
  background: var(--wave-research-surface-bg);
  box-shadow: var(--wave-research-shadow);
}

.wave-research-surface-strong {
  background: var(--wave-research-surface-strong-bg);
}

.wave-research-zone {
  background: var(--wave-research-zone-bg);
}

html[data-theme="dark"] .wave-research-canvas {
  --wave-research-canvas-bg: var(--wave-dark-canvas);
  --wave-research-grid-line-y: rgba(174, 160, 128, .026);
  --wave-research-grid-line-x: rgba(174, 160, 128, .018);
  --wave-research-ambient-a: rgba(198, 178, 113, .044);
  --wave-research-ambient-b: rgba(174, 160, 128, .018);
  --wave-research-surface-bg: linear-gradient(180deg, rgba(34, 35, 32, .96), rgba(24, 25, 23, .94));
  --wave-research-surface-strong-bg: linear-gradient(180deg, rgba(38, 39, 35, .96), rgba(22, 23, 21, .95));
  --wave-research-zone-bg: var(--wave-dark-surface-zone);
  --wave-research-control-bg: var(--wave-dark-surface-zone);
  --wave-research-border: var(--wave-dark-border-subtle);
  --wave-research-border-strong: var(--wave-dark-border-strong);
  --wave-research-text-primary: var(--wave-dark-text-primary);
  --wave-research-text-secondary: var(--wave-dark-text-secondary);
  --wave-research-text-tertiary: var(--wave-dark-text-tertiary);
  --wave-research-accent: var(--wave-dark-accent);
  --wave-research-accent-soft: var(--wave-dark-accent-surface);
  --wave-research-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .wave-research-canvas::after {
  background:
    radial-gradient(circle at 18% 6%, var(--wave-research-ambient-a), transparent 32%),
    radial-gradient(circle at 88% 12%, var(--wave-research-ambient-b), transparent 34%),
    linear-gradient(180deg, rgba(18, 17, 15, .12), rgba(18, 17, 15, .02) 48%, rgba(18, 17, 15, .20));
}

html[data-theme="dark"] .wave-research-surface,
html[data-theme="dark"] .wave-research-surface-strong,
html[data-theme="dark"] .wave-research-zone {
  border-color: var(--wave-research-border);
}

html[data-theme="dark"] .wave-research-surface {
  background: var(--wave-research-surface-bg);
  box-shadow: var(--wave-research-shadow);
}

html[data-theme="dark"] .wave-research-surface-strong {
  background: var(--wave-research-surface-strong-bg);
}

html[data-theme="dark"] .wave-research-zone {
  background: var(--wave-research-zone-bg);
}