/* =============================================================
   SURFACES.CSS
   Resolves --surface-* tokens based on modifier class.
   Apply one of: .surface-light  .surface-mid  .surface-dark
   to any block root element.

   RULES
   ─────────────────────────────────────────────────────────────
   • All block CSS references --surface-* tokens ONLY.
   • Theme files supply the raw --bg-* / --text-* primitives.
   • This file bridges theme tokens → surface tokens.
   • No hardcoded color values here — only var() references.
   • --dark-raised-alpha, --dark-hover-alpha, --dark-muted-alpha,
     --dark-border-strong come from tokens.css (fallback) and
     may be overridden per theme for fine-tuned dark surface feel.

   LOAD ORDER: after tokens.css + theme, before blocks.
   ============================================================= */

/* ── Light surface ────────────────────────────────────────── */
.surface-light {
  --surface-bg:            var(--bg-page);
  --surface-bg-card:       var(--bg-card);
  --surface-bg-raised:     var(--bg-surface);
  --surface-bg-hover:      var(--bg-hover);

  --surface-text:          var(--text-primary);
  --surface-text-soft:     var(--text-secondary);
  --surface-text-muted:    var(--text-muted);
  --surface-text-ghost:    var(--text-ghost);

  --surface-border:        var(--border-subtle);
  --surface-border-strong: var(--border-strong);

  background: var(--surface-bg);
  color: var(--surface-text);
}

/* ── Mid surface ──────────────────────────────────────────── */
.surface-mid {
  --surface-bg:            var(--bg-mid);
  --surface-bg-card:       var(--bg-card);
  --surface-bg-raised:     var(--bg-page);
  --surface-bg-hover:      var(--bg-surface);

  --surface-text:          var(--text-primary);
  --surface-text-soft:     var(--text-secondary);
  --surface-text-muted:    var(--text-muted);
  --surface-text-ghost:    var(--text-ghost);

  --surface-border:        var(--border-subtle);
  --surface-border-strong: var(--border-strong);

  background: var(--surface-bg);
  color: var(--surface-text);
}

/* ── Dark surface ─────────────────────────────────────────── */
/*    Uses --dark-* alpha tokens instead of hardcoded rgba().  */
/*    Defaults live in tokens.css; themes may override.        */
.surface-dark {
  --surface-bg:            var(--bg-dark);
  --surface-bg-card:       var(--bg-card-dark);
  --surface-bg-raised:     var(--dark-raised-alpha);
  --surface-bg-hover:      var(--dark-hover-alpha);

  --surface-text:          var(--text-inverse);
  --surface-text-soft:     var(--text-inverse-muted);
  --surface-text-muted:    var(--dark-muted-alpha);
  --surface-text-ghost:    var(--text-ghost);

  --surface-border:        var(--border-inverse);
  --surface-border-strong: var(--dark-border-strong);

  background: var(--surface-bg);
  color: var(--surface-text);
}

/* ── Smooth transitions on surface swap ───────────────────── */
[class*="surface-"] {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}