/* =========================================================
   shared/css/surface.css
   Context variables for the shared reading surface.
   Applied to: NetWord Layers panel (.layer-pane-content)
               Studio Preview panel (#preview-body)

   Load order: after shared/css/markup.css, before app stylesheet.

   This file's sole job is to scope --nwm-* variable values
   to the reading containers, mapping app tokens to the
   variable contract defined in markup.css.

   All element-level visual rules live in markup.css only.
   App-level :root mappings live in each app's own stylesheet.
   ========================================================= */

.layer-pane-content,
#preview-body {
  /* ── Typography ──────────────────────────────────────── */
  --nwm-size:    1rem;

  /* ── Colors ──────────────────────────────────────────── */
  --nwm-text:    var(--text-2, #444);
  --nwm-muted:   var(--text-2, #888);
  --nwm-accent:  var(--accent, #c9a84c);
  --nwm-brand:   var(--nwm-accent);
  --nwm-border:  var(--border, #e0e0e0);
  --nwm-surface: var(--bg-card, var(--bg-raised, #faf7f2));
  --nwm-shadow:  var(--shadow-card, 0 4px 16px rgba(0, 0, 0, .08));
  --nwm-focus:   var(--focus, var(--accent, #c9a84c));

  /* ── Container layout ────────────────────────────────── */
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: var(--nwm-size, 1rem);
  line-height: 1.6;
  color: var(--nwm-text, #444);
  background: var(--nwm-surface, #ffffff);
  padding: var(--layers-padding, 16px);
}