@scope (canvas-ui) {

  /* ═══════════════════════════════════════════════════════
     TOKENS
     ═══════════════════════════════════════════════════════ */

  :where(:scope) {
    --canvas-bg-default:              var(--a-canvas-0);
    --canvas-fg-default:              var(--a-fg);
    --canvas-font-family-default:     var(--a-font-family);
    --canvas-inset-default:           var(--a-space-2);
    --canvas-surface-bg-default:      var(--a-bg);
    --canvas-surface-max-default:     56rem;
  }

  /* ═══════════════════════════════════════════════════════
     CANVAS HOST
     ═══════════════════════════════════════════════════════ */

  :scope {
    box-sizing:          border-box;
    display:             flex;
    flex-direction:      column;
    min-height:          0;
    height:              100%;
    background:          var(--canvas-bg, var(--canvas-bg-default));
    color:               var(--canvas-fg, var(--canvas-fg-default));
    font-family:         var(--canvas-font-family, var(--canvas-font-family-default));
  }

  /* ═══════════════════════════════════════════════════════
     SURFACE (a2ui-root area)
     ═══════════════════════════════════════════════════════ */

  [data-canvas-surface] {
    flex:                1;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    overflow:            auto;
    padding:             var(--canvas-inset, var(--canvas-inset-default));
    min-height:          0;
    background:          var(--canvas-surface-bg, var(--canvas-surface-bg-default));
  }

  [data-canvas-surface] > a2ui-root,
  [data-canvas-surface] > theme-ui {
    display:             block;
    width:               100%;
    max-width:           var(--canvas-surface-max, var(--canvas-surface-max-default));
  }
}
